I'm trying to create a page similar to this one http://www.seattlewebdesign.com/.
As you scroll down, the image stays fixed, however when I try to set the background as 'background-attachment: fixed' within a div tag, the background image stays fixed to the browser window and continues to remain fixed after scrolling past the div.
Any ideas on how to achieve what I'm trying to do? Any help would be very appreciated.
Encapsulate it in a div
Fiddle
html {
height: 2000px;
}
#test {
background-image: url("http://www.cssnewbie.com/wp-content/uploads/2008/12/random-art.gif");
width: 100%;
height: 200px;
border: 2px solid red;
background-attachment: fixed;
}
<div id="test"></div>
Related
I dont really have anything to show, but i'll try to explain.
I am using HTML and CSS and i have a background image the size of the moon. (3840x18509 pixels). How can i add this as a background on the page, get it to scale automatically to the screen, and make it scrollable? What i mean by that is that i want to be able to scroll all the way to the bottom of the long picture. using :cover is not doing it, and when i set height:18509px; The image gets wider than it's supposed to be so that it cuts out on the sides.
I want the website to be as wide as the original picture, and as high as the original picture. I want to show the entire picture in a way that it fits the screen width, but must be scrolled downwards to reach the bottom. Thanks in advance.
body, html {
margin: 0;
padding: 0;
border: 0;
background-image: url("HuronWP.png");
background-repeat: no-repeat;
background-size: cover; I dont want it to cut the image height,
i want to scroll down to see the rest.
}
}
If you know the exact size of the image you simply have to set the aspect-ratio of <body> to match the image: body { aspect-ratio: 3840 / 18509; }
body {
margin: 0;
background-image: url('https://www.tacoshy.de/stackoverflow/3840x18509.jpg');
aspect-ratio: 3840 / 18509;
}
Alternativly you could insert the image directly and use width: 100% to fit the screen while maintaining its aspect-ratio.
img {
width: 100%;
display: block;
}
/* for styling purpose only */
body {
margin: 0;
}
<img src="https://www.tacoshy.de/stackoverflow/3840x18509.jpg">
I think you want to scroll you image whenever it becomes wider or longer than your page. You can do this simply using css overflow property.
overflow:scroll;
Just adding this to our code it will work fine.
Whenever the image height or width will be larger than you container then it will automatically be a scrollable.
Here I have created a div class and put my image inside this div.
<div class="image">
<img
src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg"
alt="img"
/>
</div>
Now I am changing the height and width of my <img> so that it will overflow the <div> class.
height and width of image.
img {
height: 1000px;
width: 1000px;
}
height and width of outer div
.image{
height: 900px;
width: 900px;
overflow: scroll;
}
This property will be valid only when the outer div must have smaller height and width than the inner,
So i have this image right here
"http://i.imgur.com/eh71foN.png"
My problem is that whenever i resize the window the Mass Effect image doesnt resize with it.
It becomes like this
"http://i.imgur.com/jaDV7jG.png"
I've been trying to figure this out for a while. Can anyone point me in the right direction?
#MassEffectSign {
background: url(masseffect12.png) center top no-repeat;
top: 25px; left: 750px; z-index: 2;
padding: 250px;
position: absolute;
}
My blue background
#bodyBorder {
background: url(navyblue.jpg) center top repeat-y;
padding: 1000px;
opacity: 0.7;
background-attachment: fixed; }
Use img tag instead background image in CSS.
img {width: 100%}
Use percents for the relevent values.
top: 25px; left: 45%;
This makes the amount of space between the left edge and the image relative to the window size. Play around with the value a little to center it and you should be good.
Your positioning is absolute, so it will move independently of the scale. Put that inside a relatively positioned div and then it will work.
For instance,
<div style="position:relative;">
<div id="MassEffectSign"> </div>
</div>
Hope this helps.
I was wondering if there is anyway to make the background image in a div expand to the border.
Let's say I have a div with a background and a border. I want to make the background image in the div expand over the border so it kind of looks like there is no border at all(I know there's no point for this but I need to know how to do it for something I'm working on).
Maybe something like this code:
#myImage {
height: 200px;
width: 500px;
background-image: url("image.jpg")
background-repeat: no-repeat;
border: 0px solid black;
overflow: hidden;
}
The site i'm editing is www.bedriftsdesign.no.
I've got a shadow image element (shadow.png) wrapped arround the body.
#wrapper {
background: url('shadow.png') no-repeat;
width: 1282px;
margin: auto;
I'd like to make the shadow stay fixed while the content scrolls through it inside so it looks like it scrolls over a bump. I tried to add position: fixed like this
#wrapper {
background: url('shadow.png') no-repeat;
width: 1282px;
margin: auto;
position: fixed;
But this only made the whole page stick and let nothing scroll. I just can't understand how I should progress to make this work.
Any help to fix that problem would be really appreciated?
You could set the body bg img like so and let the rest of the site scroll:
body {
background: url('shadow.png') no-repeat;
background-attachment: fixed;
}
I've done this to this site (if is that you want): www.kapantzakis-snails.gr
I have a background image which i need to display vertically as long as the content on the page, but, my background image only shows to the page in view and when I scroll down for the rest of the content the background is not shown in the rest of the page. What am I doing wrong?
css for the background image
#wrapper {
text-align: left;
margin: 0px auto;
border:0;
width: 960px;
height: 100%;
background-image: url('/images_/backgrounds/content_shadow.png');
background-repeat: repeat-y;
}
Try applying the background-image and background-repeat rules to body instead of #wrapper.
Try adjusting the height property, the 100% is relative to what?
Generally i prefer defining height rules with min-height.
My guess is that the wrapper div isn't extending to the bottom of the content either. Try setting the border of wrapper to:
border: 1px solid black;
You might find that the background is behaving just fine, and the div isn't doing what you want.
Apply the background image styling to html{ } instead.
remove the height: 100%; from css.