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.
Related
I have HTML and CSS like this:
.item {
width: 100%;
height: 768px;
background-image: url("https://a0.muscache.com/im/pictures/f1502649-e034-40ab-9fed-7992b7d550c6.jpg?im_w=1200");
background-repeat: no-repeat;
background-size: 100% auto;
border-radius: 50px 50px;
}
<div class='item'></div>
When I resize the browser, the bottom border-radius doesn't work.
Change background-size: cover; and you could add background-position: center; to center your image.
.item {
width: 100%;
height: 768px;
background-image: url("https://a0.muscache.com/im/pictures/f1502649-e034-40ab-9fed-7992b7d550c6.jpg?im_w=1200");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border-radius:50px 50px;
}
<div class='item'></div>
As mentioned in other answers, you might want to use background-size: cover;. It will stretch the image to cover the whole area of the div (so the border-radius will be visible).
However since the image can be cropped after this change (specifically in the case when it does not have the same aspect-ratio like the area of the div), it might be necessary to use also background-position to position the background image as you like (by default it is aligned to the top left corner).
Most probably you will have good results with centering it, but the possibilities are endless ;)
background-size: cover;
background-position: center;
I've added a background-img to my section container. Inside that I wan't to create another div, which sits over the top and will include separate img/copy. At the moment if I try and position that div with margin or padding, it is also moving the background image (see whitespace in screenshot).
Is there a way to style this div so I can align it without the background image on the section moving as well? For reference, the 'tree' image is the background image
.section__feature {
background-image: url('/assets/img/hero.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 100vh;
}
.featured {
position: relative;
margin-top: 2rem;
&__img {
background-image: url(/assets/img/featured.jpg);
background-position: center;
background-size: cover;
height: 20rem;
}
grid-area: featured;
}
<section class="section__feature">
<div class="grid-container">
<div class="featured">
<div class="featured__img"></div>
</div>
<div class="feature-small-top"></div>
<div class="feature-small-bottom"></div>
</div>
</section>
Many thanks
Try setting your background-position: fixed; and z-index:-1; on your .section_feature if that is your background image.
This is the effect I need for my website:
http://urban-walks.com/#nicer_way
Not the fancy side of it - I have background images for certain 'sections' or divs, and I need them to fill the whole of the browser window. They also need to resize when changing browser side (such as using mobile) so it keeps the effect.
This is my current code for each div -
HTML:
<div class="graph">
<br><h1>Latest SKE Graph</h1>
<img src="knowledge_graph.jpg">
</div>
CSS:
.graph {
background-image: url("pexels-photo-279366.jpeg");
background-size: cover;
background-position: center;
height: 700px;
text-align: center;
}
Change your height to "100vh" and your width to "100vw". v stands for view-port of the device.
.graph {
background-image: url("pexels-photo-279366.jpeg");
background-size: cover;
background-position: center;
height: 100vh;
width: 100vw;
text-align: center;
}
Here is a Codepen with the problem I have:
http://codepen.io/rasmus/pen/pvXjOG
html:
<div></div>
css:
div {
background: url("http://placehold.it/600x300");
background-size: cover;
max-width: 600px;
height: 300px;
}
When I'm now resizing the div - because my viewport is narrower than 600px e.g. - the background image is "cropped" to the left side. But I want to have it "cropped" on both sides, so that I can still see the middle of the picture.
What's my mistake? I know it can be done. An Example would be http://comfortzonecrusher.com e.g.
Just use this:
background-position: center;
So your CSS becomes:
div {
background: url("http://placehold.it/600x300");
background-size: cover;
background-position: center;
max-width: 600px;
height: 300px;
}
Updated Codepen: http://codepen.io/anon/pen/xbowmZ
Try background-size: contain; on your div.
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;
}