I am trying to create a header for a website. What I am trying to do is repeat a background image all the way across my page for the header background. This image is 1px wide. On top of that image I want to center another background image on top of the previous and have it centered and no repeating. The second image is the logo of the site and the title etc.
With the below code I get the top layer not centered and repeating with the bottom layer.
.mainHeaderBottomLayer
{
background-image: url("images/header.png");
background-repeat: repeat-x;
height: 107px;
text-align: center;
}
.mainHeaderTopLayer
{
background-image: url("images/headerLayer.png");
background-repeat: no-repeat;
width: 1200px;
margin: 0 auto;
}
Here is the html
<div class="mainHeaderBottomLayer">
<div class="mainHeaderTopLayer"></div>
</div>
Anyone know how this can be done?
background: url("images/headerLayer.png") no-repeat center top #fff;
or
background: url("images/headerLayer.png") no-repeat 50% 0 white;
.mainHeaderTopLayer {
background: url(images/headerLayer.png) no-repeat center top;
width: 1200px;
height: 200px;
margin: 0 auto; }
Just center the image via the background property and position attributes.
Based on comments above you need a height attribute as well....
Use background-positioning to align the logo:
.mainHeaderTopLayer
{
background-image: url("images/headerLayer.png");
background-repeat: no-repeat;
background-position: center center;
width: 1200px;
margin: 0 auto;
}
Related
I inserted two background images to a div and gave them the top and bottom positions. However, the issue is that I want the images to have an equal top and bottom margin. I'm not sure how to accomplish it.
I want the background images like in the SS.
html:
<div class="license-info">
</div>
css:
.license-info {
width: 100%;
height: 800px;
background: #181f2b;
background-image: url('/images/footerdiamondchain.png'), url('/images/footerdiamondchain.png');
background-repeat: repeat-x;
background-position-y: top, bottom
}
You can specify an independent background-position for each background image. So you could set them equal distance from top and bottom, respectively, via a rule like this:
background-position: center top 80px, center bottom 80px;
center top 80px sets the first image 80px from the top
center bottom 80px sets the second image 80px from the bottom.
.license-info {
width: 100%;
height: 800px;
background: #181f2b;
background-image: url('//placekitten.com/50'), url('//placekitten.com/50');
background-repeat: repeat-x;
background-size: 50px;
background-position: center top 80px, center bottom 80px;
}
<div class="license-info"></div>
you can do like that.
<div class="license-info">
<img class="first-img" src="./first/path"></img>
<img class="second-img" src="./second-img/path"></img>
</div>
.license-info {
position:relative;
}
.license-info .first-img {
position:absolute;
top:50px// change this position
}
.license-info .second-img {
position:absolute;
bottom:50px;
}
I want the Mario image to be on top of that background in the screenshot below, as you can see it's working, however I'm not able to center the Mario image on top of the background. I would also like to remove the extra unwanted repeating pattern on the background image.
Code:
.marioHeader{
background-image: url("resources/marioBackground.jpg");
background-size: 600px;
height: 500px;
background-position: bottom;
margin: auto;
}
.headermario {
background-image: url("resources/banner.png");
background-size: 600px;
background-repeat: no-repeat;
background-position: bottom;
height: 200px;
display: block;
margin: auto;
}
<div class="marioHeader">
<div class="headermario">
</div>
</div>
Image of how it looks:
For centering, you can use flexbox to do this easily: https://jsfiddle.net/tdfu3em1/2/
Just give the container div:
display: flex;
justify-content: center;
align-items: center;
Now the child div will be centered.
As for the repeating pattern, there's not enough info to know. Does it repeat in the original image? I'm guessing not, and you don't have no-repeat. But what do you want to happen in it's place? Nothing? Background color? Kind of depends.
The header of my website's homepage consists of the following layout:
<header>
<div class="navbar-lock"></div>
<div class="hero"></div>
</header>
Where div.navbar-lock is a fixed navigation with an initial height of 90px, and div.hero contains some header text. Visually, I want to give the appearance that one background image (2000px x 481px) spans the height and width of both. On scroll, the fixed navbar's background will be the top 90px of the image; when the scroll position is back at the top of the page, the header once again appears as one background image.
What I've tried:
Approach A:
header {
background: #F60 url(../images/header_bg.jpg) no-repeat 0 0;
background-size: cover;
}
div.navbar-lock {
background: #F60 url(../images/header_bg.jpg) no-repeat 0 0;
background-size: cover;
min-height: 90px;
padding-top: 20px;
position: fixed;
top: 0;
z-index: 100;
width: 100%;
}
Approach B (crop the image into 2):
div.navbar-lock {
background: #F60 url(../images/header_bg.jpg) no-repeat 0 0;
background-size: cover;
}
div.hero {
background: #F60 url(../images/header_bg.jpg) no-repeat 0 -90px;
background-size: cover;
position: relative;
top: 90px;
padding: 80px 0 134px; // padding to properly position its text
}
But in both attempts, I was unable to get the image(s) to line up properly. What am I missing here?
I would put the header and the hero div's into a parent div. And would put the image onto the parent div.
How do I eliminate the whitespace when the browser size changes if I am using background-size:contain;?
The whitespace between the image and the text is way too much with smaller browser sizes. site is: http://16debut.com/test.html
CSS is:
body {
margin:0px 0px;
}
#hero {
background-clip: content-box;
background-image: url("imgtop.png");
background-size: contain;
background-repeat: no-repeat;
position: relative;
height: 235vh;
}
#content {
padding: 100px 50px;
text-align: center;
width: 80%;
margin: 0px auto;
}
#content h2 {
margin: 0px 0px 30px 0px;
}
#footer {
padding: 30px 0px;
text-align: center;
background: #ddd;
}
jsbin demo
You want to go fully responsive but keep the white clouds at the bottom?
Use two background images for the same element.
Cut out the white bottom clouds save as separate .png image. Use as first background-image.
(optional) Save again your bigger image, just without the white clouds. Use that image as second background image value.
Now in CSS:
set the clouds to background-position: bottom and 100% size ("width")
Set the bigger image to center (50%) position and cover
CSS
html, body{height:100%; margin:0;}
#hero{
position:relative;
height:130vh; /* USE THE RIGHT RATIO since the image Logo is a bit up*/
background: no-repeat
url(http://i.stack.imgur.com/eWFn6.png) bottom / 100%, /* BOTTOM CLOUDS OVERLAY */
url(http://i.stack.imgur.com/IVgpV.png) 50% / cover; /* BIG IMAGE */
}
HTML
<div id="hero"></div>
<div class="other">
<h1>Other Divs</h1>
<p>bla bla</p>
</div>
Seems that Safari is a quite stupid browser (they even removed support for windows since 2012... Amazing). Here's the jsBin example and css:
#hero{
position:relative;
height: 900px;
height: 100vh;
background: url(http://i.stack.imgur.com/eWFn6.png) no-repeat bottom, url(http://i.stack.imgur.com/IVgpV.png) 50%;
background-size: 100%, cover;
}
Demo
.moving_background
{
background-image: url("../image/quote3.jpg");
background-position: 50% center; /*Centering property*/
background-repeat: no-repeat;
height: 100px;
margin: 20px;
width: 100px;
border:1px solid;
}
If i change the width and height to 100%, it is not showing the border to me. I don't understand the reason. Please let me know this
I am trying to center this div in the body. Any other ways are also welcome except negative top, left, margin values.
Any idea?
The issue is that background-image does not count as content in your div, so what you have is an empty div, hence it has no height. A way around this is to add the image inside the div, then hide it.
HTML
<div class="moving_background">
<image src="http://placehold.it/100x100" class="background"/>
</div>
CSS
.moving_background {
background-image: url("http://placehold.it/100x100");
background-position: 50% center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
margin: 20px;
width: 100%;
border:1px solid;
}
.background {
visibility: hidden
}
JSFiddle: http://jsfiddle.net/nhg33xek/4/