I have a small .png file that repeats to form a background image. I need to set the body height of my page to 100% in order to use min-height property on my content wrapper. However, trying to use the background-image in conjunction with height:100% results in the image getting cut off when the page is scrolled. See picture to elaborate what I mean:
Background on top
But when scrolling it is cut off
How do I get the background image to repeat over the whole page, even after the user scrolls down? Here is the css:
body {
background-color:#9AAEBF;
overflow-y:scroll;
height:100%;
}
html:after {
background-image: url('http://www.example.com/img/background.png');
opacity:0.4;
content: "";
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
Thanks for your ideas.
EDIT:
This is the image i need repeated:
Here is a fiddle:
http://jsfiddle.net/Nick_B/x2h3g/
try this
html:after {
background-image: url('http://www.example.com/img/background.png');
background-repeat:repeat;
opacity:0.4;
content: "";
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
Now used to background-size
As like this
body {
background-color:#9AAEBF;
overflow-y:scroll;
height:100%;
}
html:after {
background-image: url('http://i.stack.imgur.com/iuzZU.png');
background-size:100%;
opacity:0.4;
content: "";
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
Demo Full page
Live Demo
you can achieve your desired result through give the backgroun-size:100% in your html:after
CSS
html:after {
background-image: url('http://i.stack.imgur.com/iuzZU.png');
background-size:100%;
opacity:0.4;
content: "";
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
Related
I have a css styling problem:
I created a header with text inside. The header has two pseudo elements: ::before and ::after.
Both elements lay on top of the header element. How do I get the h1 to stay in front of everything??
Here is my code example: (got code snippets removed?? i didnt found the button where to add)
header {
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 99;
background-image: url("Bild1.svg");
background-size: 100% 100%;
text-align: center;
padding: 1px 20px;
}
header::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url("Bild2.svg");
background-size: 100% 100%;
opacity: .5;
}
header::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: -10px;
background-image: url("Bild3.svg");
background-size: 100% 100%;
opacity: .5;
}
<header>
<h1>Title Text</h1>
</header>
Here is a image how it looks:
As you can see the Text is behind both elements.
I tried to fix it using z-index but nothing worked for me. U have and ideas?
apply z-index 99 on background
and apply z-index 999 on the text I hope it will work
I would suggest making the z-index of the h1 tag
h1{
z-index: 999;
color: white;
}
and making the background z-index to 99 or something below that.
I am trying to build a page that will display a .png image of a computer (with a transparent screen), which I can then layer a website screenshot behind and scroll through, to give the effect of scrolling a real website.
For example, this page, but it can be with a scrollbar instead of automatic scrolling: http://preview.themeforest.net/item/fwrd-music-band-musician-wordpress-theme/full_screen_preview/12087239
I've actually managed to achieve the required, but I can only scroll the long website image (#instagram) when I 'inspect' the page. I assume the #laptop image is blocking the #instagram image somehow?
#container {
position: relative;
top: 0;
left: 0;
}
#instagram {
z-index: 1;
width: auto;
height: 400px;
border-radius: 5px;
overflow: scroll;
position: absolute;
top: 0px;
left: 0px;
}
#laptop {
z-index: 2;
width: auto;
height: auto;
position: relative;
top: 0;
left: 0;
}
You could use a pseudo element with pointer events none for your laptop and then just position your scrollable background where the screen is:
.laptop {
position: relative;
/* width and height of laptop image */
width: 584px;
height: 360px;
}
.laptop:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:url(https://pngimg.com/uploads/laptop/laptop_PNG5938.png) left top no-repeat;
background-size:cover;
z-index:2;
pointer-events:none;
}
.background {
/* width and height of screen */
width:414px;
height:229px;
overflow:auto;
position:absolute;
/*POsition of screen in image */
top: 28px;
left:82px;
}
<div class="laptop">
<div class="background">
<img src="https://www.fillmurray.com/412/600">
</div>
</div>
I am trying to set a background image for my wordpress website.
.content:before {
content: "";
background-image: url("gfx/SevenWonders.jpg");
/*background: #fff;*/
background-size:600px 700px;
background-repeat: no-repeat;
position: absolute;
z-index: -9999;
top: 0;
right: 28.5%;
bottom: 0;
left: -10000px;
}
this is my css code with background-image. I resized the size because the image
is pretty large for my website. AND! after adding background-repeat: no-repeat,
the background is not displayable. I see only white background.
Of course, I googled to find the solutions, but almost all of them are saying
about syntax error, but I cannot find any syntax mistakes in my code ..
check this fiddle. Problem is with your left property value in css.
.content:before {
content: "";
background-image: url("https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150");
/*background: #fff;*/
background-size:600px 700px;
background-repeat: no-repeat;
position: absolute;
z-index: -9999;
top: 0;
right: 28.5%;
bottom: 0;
left: 0px;
}
I have a background image for the wrapper div of a page. I want the image to be 0.5 opaque. My problem is that all other items inside the div also become 0.5 opaque. How can this be avoided?
#detailswrapper
{
background-size:cover;
background-repeat: no-repeat;
opacity:0.5;
}
you can use something like this
JS Fiddle
div::after {
content:"";
background: url('http://www.psdgraphics.com/wp-content/uploads/2014/02/colorful-triangles.jpg');
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
I can't get my images to go side my side (below share and follow) on this page:
http://toddheymandirector.com/REEL/index_newlook_gallery2222.html
The suspect code:
#gallery ul div {
min-width:26.6%;
margin:0;
float:left
background-color:#595959;
}
Any ideas?
find this block into your css file:
img.a {
left: 0;
position: absolute;
top: 0;
z-index: 10;
}
and replace the position to relative:
img.a {
left: 0;
position: relative;
top: 0;
z-index: 10;
}