{"id":68745,"date":"2025-06-20T03:01:00","date_gmt":"2025-06-19T17:01:00","guid":{"rendered":"https:\/\/www.rjmprogramming.com.au\/ITblog\/?p=68745"},"modified":"2025-06-21T14:41:38","modified_gmt":"2025-06-21T04:41:38","slug":"css-background-position-revisit-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/css-background-position-revisit-tutorial\/","title":{"rendered":"CSS Background Position Revisit Tutorial"},"content":{"rendered":"
\"CSS<\/a>

CSS Background Position Revisit Tutorial<\/p><\/div>\n

We are great admirers of HTML and CSS regarding the way multiple background images are possible behind an HTML element.<\/p>\n

To get to a multiple background image scenario (or even single ones regarding the basis for this blog posting’s creation), the “Making Of” yesterday’s AlmaLinux Astronomy via PHP and Python PyEphem Revisit Tutorial<\/a> we thought needed further scrutiny.<\/p>\n

It’s the HTML blockquote background image<\/a> of Nala and Luna<\/a> of most interest, at least to us. It involved the use of CSS …<\/p>\n


\nbackground-position-x<\/a>:right;
\n<\/code><\/p>\n

… property, for our first time, that we can remember that is<\/a>.<\/p>\n

The blockquote styling did something to our …<\/p>\n

    \n
  1. background-size:contain;<\/li>\n
  2. background-repeat:no-repeat;\n<\/ol>\n

    … “dynamic duo”, again<\/a>, property combination, truncating imagery to the right (where Nala and Luna, the stars of the show, were) for the first time we’ve ever seen. We were forced to relook at all the background-position type styling properties, and that’s when we came across background-position-x:right as a way to get “the stars” back into the picture.<\/p>\n

    From there, we thought it might be good to write a proof of concept textarea based showing of the styling of that blockquote element involved, and allow the user to modify it either …<\/p>\n

      \n
    • within the textarea element, on tabbing out of it … or via …<\/li>\n
    • some set dropdown alternative CSS property suggestions … and in amongst those dropdown options, via …<\/li>\n
    • enter user CSS properties of interest<\/li>\n<\/ul>\n

      … to see, dynamically, what happens to the WordPress styling conditioned blockquote rendition above the form, to confirm what your CSS would do, using our “first draft”<\/a> web application<\/a> also shown below …<\/p>\n