background images with heading text -...

User 2903050 Photo


Registered User
136 posts
Online Now

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:)
User 244626 Photo


Registered User
628 posts

Phillip Dias wrote:
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.
User 244626 Photo


Registered User
628 posts

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.
Attachments:
User 2846109 Photo


Ambassador
334 posts

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. :)
http://www.pixelandpoly.com/ (built with Bootstrap Builder)
Video Tutorials - https://www.youtube.com/channel/UCQMcF0 … EKA/videos
The Universe from A to Z - https://universeatoz.com/ (built with Foundation Framer)
User 2699991 Photo


Registered User
1,734 posts

Jeff wrote:
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
The Sky Is A big Empty Space : But There Is No Room For Error
website https://rsdtutorials.com
User 2846109 Photo


Ambassador
334 posts

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!
http://www.pixelandpoly.com/ (built with Bootstrap Builder)
Video Tutorials - https://www.youtube.com/channel/UCQMcF0 … EKA/videos
The Universe from A to Z - https://universeatoz.com/ (built with Foundation Framer)
User 2699991 Photo


Registered User
1,734 posts

Jeff wrote:
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.
The Sky Is A big Empty Space : But There Is No Room For Error
website https://rsdtutorials.com
User 2846109 Photo


Ambassador
334 posts

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

Thanks Wayan!
http://www.pixelandpoly.com/ (built with Bootstrap Builder)
Video Tutorials - https://www.youtube.com/channel/UCQMcF0 … EKA/videos
The Universe from A to Z - https://universeatoz.com/ (built with Foundation Framer)

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.