Quick problem with background-image header
i am having a small problem with extending the background-color of my website header.
PROBLEM : I basically have an image that must be located in the center of the page, and as it's background color is black, I would like the color to extend throughout the whole width of the page.
QUESTION : What is the best way to organize the image and the background in order to make it match exactly in a responsive way ?
HOW IT SHOULD BE VISUALIZED (END RESULT) :
Thank you very much for your attention
I couldn't tell exactly what you wanted from the example you posted, but I'd use something like:
It's those two properties that you'll need to set, even if my suggestion doesn't quite work the way you wanted.
rtrethewey give the right way
Thank you very much for your reply !
I was just wondering what is the exact logic behind it, as I am just starting out with css and I haven't explored in great depth all the background options and properties yet. I am wondering what exactly does the "auto" attribute does in the background-size and also why did you use the "center" attribute two times instead of one.
Originally Posted by rtrethewey
'auto' tells the browser to use the image's native size. When you only use one position setting in 'background-position', the other setting defaults to 'center'.
Thank you very much guys, I managed to make it work in the end !
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)