This is a simple question about CSS, but I am not sure I know how to ask it correctly. Basically, I have an image that I wanted repeated both x and y. But even though this image is repeated, is it possible to style it as if the image was positioned absolutely?
Take this image here: https://samraines.herokuapp.com/assets/paper-d5baa328bec5b7c9fe4cf98bba88452e.png, and look at it here: https://samraines.herokuapp.com/shows . This is what I was wanting to use this style on, but was unsure if I could accomplish and "absolute" style due to the image's size.
Clarifying once more, I want the image to repeat, but appear as if it was fixed.
Thanks for your help.
Try this css:
.element {
background-image: url(...);
background-position: 0 0;
background-repeat: repeat;
background-size: auto;
background-attachment: fixed; // if you do not want to scroll image with site
}
like here http://codepen.io/Chovanec/pen/dkFDp
Related
I want to do like that: https://youtu.be/shgvBWJ-lTw?t=175
But when I do like that, it would not be responsive. How can i do that responsive in html, css, bootstrap?
I tried many things.
Umm, there is not images from your code or website so i cant see what is actually happening and why your image is not responsive. Make section with .container-fluid So section will have 100% width and responsive, then edit your box with image in css like this:
exapmle:
.box is element where you want to apply your fixed background image.
.box{
background-image: url('image.jpg');
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
width: 100%;
}
I'm not sure if this is going to help you but try it, if this doesn't help try to find another solution or next time send image with your code or website. :D
I'm trying to add a fixed background to ONLY this section of my web-page.
When someone scroll down to another section, I'll add background color, not image.
I dont know how to explain this, so I made a demo on my website:
demo
image explanation
I already tried this:
.cd-fixed-bg {
min-height: 100%;
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
}
.cd-fixed-bg.cd-bg-1 {
background-image: url(" IMAGE URL IS HERE ");
}
My html code (without this css above this):
That didn't work execly on way I wanted, so I uploaded demo with that too:
demo
PS. Ignore russian phone images, I was just testing something.
I tried some other css tricks but nothing worked correctly.
Thanks.
Since the question is answered correctly, demo was removed. Thanks!
Here it's work fine: http://csgotale.com/stackoverflow-demo/index-with-my-try.html
but, add to your html,body and h1 margin: 0; padding: 0;
If you wanna make Parallax Effect, i do it here: http://codepen.io/powro01/details/pEBBgR/
I guess you won't be able to achieve this effect using only CSS; you will need some amount of JS code.
They're not quite what you're looking for I'd recommend looking at these to see if they help:
https://github.com/razorfish/Parallax-JS
https://github.com/cyntss/Parallax-img-scroll
I am having trouble keeping a consistent Background image height on a div across multiple devices, I am using Chrome's DevTools to preview the outcome on different devices based on their width. Let me explain further.
I have a div with the following class...
.header-image {
width: 100%;
height: 57%;
background: url('img/fruit-water.jpg') lightgrey;
background-size: 100%;
display: block;
}
This displays perfectly fine on the normal computer viewport, the height: 57%; property displays the perfect amount of the background image that I need. But when I change the view onto another device it doesn't display the same amount of the image that it initially did, it only shows about 20% of the image.
Does anyone know a way to keep the amount of the image displayed consistent, even with the width value changing?
I can't use Jquery or any plugins as the page is an AMP page and validates according to the AMP rules set by google.
https://jsfiddle.net/pre6L7d9/1 <-- Fiddle, Please look into it
Thanks in advance.
as #severinolorillajr said you can use:
background-size:cover;
and if you want to center it to the top you can use:
background-size: cover;
background-position:50% 0%;
EDIT:
Sorry i cannot answer the other question,
if you want to use a % height like 57% you need to set the image position:absolute;
Or you can use:
height:57vh;
That will do the trick!
EDIT2:
maybe you need to mantain the image scale, then you need to set it to:
height:57vw;
.header-image {
background: url('img/fruit-water.jpg') no-repeat center center fixed;
background-size: cover;
}
Check this for other CSS Implementation
I was looking at path.com today and liked their implementation of a dynamically sized cover photo. If you check it out you will see that it sizes nicely no matter your screen size.
I looked a little more into it and noticed the background image is attached to the body tag. I also noticed the body appears to get its size from the form element inside it, meaning the body itself it actually shorter than the total page.
Does anyone know how they accomplish this?
Also, the body height is set to 100% of the viewport.
I think you're looking for this part:
body.home {
height: 100%;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
This is my tumblr blog:
thestorywithnoending.tumblr.com
the code for the blog is a theme I got here:
http://themes.pouretrebelle.com/lycoris/?download
(just scroll down a bit, the whole code is there)
I want the background image to just be ONE image...
I know I'm not being descriptive enough, so to fruther explain: I want it to be like this:
http://chloescheffe.com/
you see how on that website the background image is.... everything basically. And when you change the size of the webpage, the background image changes accordingly?
how can I do that on my tumblr blog?
THANKS :)
with css. set the height and width of your bg image to 100%. sorry, i'd give you the code but this keyboard doesn't have all the characters of a larger one.
use the background-size css property w3schools.com/cssref/css3_pr_background-size.asp
You can do this two ways using background-size. One will stretch the image and one will fill the width properly, but cut off the bottom.
For stretch, add this to your body CSS:
body {
background-repeat: no-repeat;
background-size: 100% 100%;
}
For width-fill (this looks better with your current blog), add this to your body CSS:
body {
background-repeat: no-repeat;
background-size: cover;
}