How To Set Header Background Image In Html
Dwelling house /
Final calendar week I looked at how to exercise a stretchy epitome header imprint with CSS so that as you lot resize the browser window the header image remains the full width of the window and the superlative changes. One of the problems with this method is the image can get quite tall and lose quality every bit the browser window gets wider. This post looks at how to instead take a really wide background image only showing what the browser window can fit. The rest disappears into the ether.
Demo
At that place'due south a demo of this available here. You can check it out first if you would like then come back to have a look at the lawmaking.
Photo used
The photo used in the example is 3072 pixels wide and 200 pixels high. The imprint expanse remains 200 pixels wide as the browser window is resized but more of the image is revealed.
Hither's a scaled downwards (to 500 pixels broad) version of the image file:
The photo is of Rangitoto in Auckland and yous can run into Due north Head on the left side. The Eastern Suburbs are the small flake of land you lot can come across at the lesser on the right.
The HTML
The HTML used to create the effect is completely minimal; it's all done in the CSS.
<div id="header"></div>
The above should be at the height of the <body> section (unless you lot want something to a higher place it) and you might have farther divs inside it that are positioned to where you want them with navigational elements etc.
The CSS
The CSS is too very simple. You merely set a few properties and away nosotros go.
If you want to align information technology to the heart, then that the image is centered and resizing the browser window will reveal more of the image on the left and correct exercise this:
#header { background: black url(/images/rangitoto-3072x200.jpg) centre no-repeat; } If you lot prefer to marshal it to the left so it reveals off to the right as the browser window is resized then do this instead:
#header { background: black url(/images/rangitoto-3072x200.jpg) left no-repeat; } In the unlikely outcome y'all would prefer to align the epitome to the right so the images revels to the left (which would exist a kind of weird issue) then change "left" to "right".
Note that I've only set the background color to black and made the image non echo. This isn't the most desirable solution – you'd probably want to set a max-width for the folio and make the pixel width of the paradigm the max-width. If y'all really want the page to stretch as wide as the unabridged folio then y'all'd demand to find some manner of dealing with what happens when the window is super wide. Or simply non bother and let people with such a wide view to see the epitome echo.
Conclusion
This is a really simple technique and information technology's an alternative to ane I looked at last week merely does require a wide, loftier quality paradigm that works well as a narrow strip. If you lot haven't already, check out the demo page.
Source: https://electrictoolbox.com/wide-background-image-header-css/
0 Response to "How To Set Header Background Image In Html"
Post a Comment