Hi, I have a container in the main section that I would like to have a background with text over the top.
Is it wise to have 3 different sized images to help with load times etc. Will it not add to browser time having more than one image and also am I correct in thinking that the larger images will not load if viewing on a mobile device?

Also, I would like white text over the darkened image but if I use the effects pane to change the brightness of the background image container then the white text also fades. My workaround is to do the darker brightness image in
a pseudo photoshop program first and then add the text in SD? is that the best way or is there another way in SD.
Kind regards:)

Hello Phillip,

You can choose to have different sized and dimension pictures for the different breakpoints for a background image. The browser will determine which image needs to be downloaded and displayed and only that image will be downloaded.

It should be noted that background images are not indexed or ranked as they are contained in the css as a "style". If you need to have indexing or ranking for SEO then one may consider using the picture element for a html "img" tag.

If your text is in the container that you set the background image on, then it will effect the text also when adjusting the brightness etc.

You could put a container and text in a "wrapper" container and then set the inner container to the background image.
It will not effect the text when adjusting that inner containers brightness.

Just make sure the text is underneath the inner container. I used relative position on the wrapper and absolute position on the inner container and text.

Rather than use the effects pane to darken the image you can use a linear gradient on top of the image in the background. Just set the first and last color to be solid black at a desired percentage opacity such as 50% to darken up the image to your desired level.

Hi Jeff and everyone just a quick heads up. If you put a gradient onto the container holding the background image there was a bug in so much as with Microsoft edge the image would jump about like Skippy with its tail on fire. It may have been fixed with v3 but might be worth checking out

That's good to know! I just did a quick check and the sites I have that use that method look fine in Edge but the images to stagger a little during a scroll. But once you stop scrolling everything looks normal. Honestly, I never use Edge at all so thanks for letting me know!

No problem jeff there is a fix to stop the jumping but it needs to be dobe outside of rsd, hard too explain in words so maybe a short video is called for, i will try make one this week but am little bit snowed up with other work.

The other solution which can be done in rsd is a lot of work too it entsils putting a container in the element that holds the background image and applying the gradient to that container, which then means putting any existing containers holding text headers etc back in over the new container.

That makes sense regarding adding the extra container for the gradient. I might try that in my next project if needed.

Thanks Wayan!