Recently im finally making my webgame responsive and im struggling with it.
I researched that in order to my divs to be a proper size on every device I need to set position: relative on parent element, position: absolute on the divs I want to be responsive, and that part I get.
However, I need my divs to be related to the background image, because the parts of the backgrounds are clickable via divs. Can anyone guide me how to do this? Recently Ive got it looking like that:
I believe I could achieve what I want with setting proper properties on the background image which I currently have set as:
#corridor {
/*position: relative;*/
height: 100vh;
width: 85%;
float:right;
background: url("corridor.jpg");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
Related
I want to display some random design images on my sites background as background-image, problem now is that every time I place such an image it somehow interacts with nearby boxes etc.
I just want my design images (small icons etc) to be part of the background without getting in touch with other non-design elements like text, boxes etc.
Something like that I guess:
body {
min-height: 100vh;
position: relative;
height: auto;
width: auto;
background-image: url("/static/pattern.jpg");
background-repeat: repeat;
z-index: -10;
} -> "The actual background of the site"
.design_element_01 {
position: relative;
z-index: -1;
background-image: url("/static/xyz.png");
max-width: 100px;
} -> "The design element that should get placed onto the body background from above"
Try:
.design_element_01 {
position: absolute
/*...*/
}
In addition, you might need to change max-width to width, since a background doesn't provide width to the element.
Centering the Background
There are a few different approaches to centering the background. I'll outline one here; if it doesn't work for you, I can describe others.
Essentially, the idea is to make the .design_element_01 element itself take up the entire page. Then, background-size can be used to constrain the size of the background, and background-position can be used to center it. A basic example would be:
.design_element_01 {
position: absolute;
top: 0;
left: 0;
background: url("/static/xyz.png");
width: 100%;
height: 100%;
/* I'm using 100px here since you used max-width: 100px, but you can use whatever you want. */
background-size: 100px;
background-position: center;
background-repeat: no-repeat;
z-index: -1;
}
(Do note that I haven't tested this; you may need to tweak it.)
If you test this example, however, you will notice that this centers the background on the screen, but not necessarily the entire page. This may or may not be what you want. If not, you can change the <body> element's position property:
body {
position: relative;
}
This should cause the .design_element_01 element to be positioned relative to the <body> element.
I also created a JSFiddle example to demonstrate the solution: https://jsfiddle.net/mouqewzv/.
Finally, if you don't want your element completely centered, but just offset from the center, you could tweak the left and top properties of design_element_01 to position the background initially at the center, but then offset it.
Try setting your design_element_01 position to absolute NOT relative
and then try to place it however you want using
left:
right:
top:
bottom:
z-index:
Hope this works!
I am working on a rails project. I have gotten all of the rails aspect down without much of an issue. However, I ran into an issue with CSS-something that I normally do not encounter. Usually run into ruby problems!
Basically, I have a background image set on a page. At the top of that page, I have a div element. When I go to move the div element further down the page, the background image stays with it. It is almost as if the two are connected. Here is the code that I have:
HTML:
<div class="about_background">
<div class="container heading_block">
<h1 class="about_heading"><i class="fa fa-flask"></i> About Abby <i
class="fa fa-cutlery"></i></h1>
</div>
</div>
CSS:
.about_background {
background-image: url("bread.jpeg");
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment:fixed;
}
.heading_block {
background-color: rgba(200,100,175, 0.8);
border-radius: 35px;
}
.about_heading {
text-align: center;
font-size: 50px;
}
Please let me know what else is need. I tried setting something up on jsfiddle but was not getting what I needed. If you need to see the code, on github, it is under ravenusmc, food_blog. Thank you for the help!
I'm not sure how you are trying to move the div but this is what I usually use to move elements.
.heading_block {
position: relative;
top: 10px; //or however far you want to move it.
background-color: rgba(200,100,175, 0.8);
border-radius: 35px;
}
If I'm getting your point then just add...
min-height: 100%; to about_background class.
I'm not entirely sure I understand the problem you're having.
which of the divs are you moving? if it's the first (outer) then the background will move with it as it is attached to that container the background-attachment isn't going to change that, in fact if you re-size the window with this you'll see what it's actually doing is locking the position of the background to your screen and re-sizing the window will make it scroll inside of the container.
Moving the 2nd div (the inner) leaves the background in place in my test.
Perhaps attaching the background to the body instead if you must have it stay in place.
I have what is probably a simple question but I can't find the answer for it. I have a background image that looks fine and tiles fine and scrolls fine. However, I have a second background image that is layered on top of it that is put inside a wrapper div ("whiteBackground" I believe it's called) and I do not want that one to scroll with the page. As the content and text gets longer and forces the user to scroll I'd like for the second background to stay static. That way while the user scrolls down the page it would just make it seem AS IF the second background was just perfectly still.
I've tried to do a fixed background attachment in my "wrapper" div but it's a no go.
Any ideas?
http://jsfiddle.net/SMc9R/
`#wrapper {
position: relative;
width:960px;
min-height:768px;
margin: 0 auto;
background-image:url('images/white_background.png');
background-attachment: fixed;
font-family:'MuroRegular';
}`
This is the main part I believe the problem is at.
There are no images but I figured that my markup and CSS should be enough. Any help would be appreciated. Thank you so much!
Demo :http://jsfiddle.net/SMc9R/1/ DO YOU want like this.. or specify any correction regarding this correction...
#banner {
position: absolute;
float:left;
width: 960px;
height:60px;
text-align: center;
font-family:'AmaticBold';
font-size: 50px;
background-image:url('images/banner.png');
background-repeat: no-repeat;
z-index: 4;
}
This has baffled me completely,i have tried multiple times todo this but i simple cant.I am sure the solution is simple and its something i have looked over.
All help appreciated.
http://techgnotic.deviantart.com/journal/Earth-Day-The-Inspiration-of-the-Natural-World-297767607?utm_source=elnino&utm_medium=messagecenter&utm_campaign=042212_MKT_EarthDay&utm_term=button
Set background-attachment: fixed on successive divs:
div {
background-attachment: fixed;
background-position: 50% 60%;
height: 500px;
width: 100%;
}
jsFiddle
You can skip the fixed height declaration if your content will determine the height of the div. I've included a container div to display the effect in the confines of jsFiddle; in practice the body will work just fine.
What I'm trying to achieve without using JS can be seen on jsfiddle.net/k2h5b/.
Basically I would like to display two images, both centered, one in background and one in foreground:
Background Image: Should cover the whole window without affecting the aspect ratio, which means that the image will always touch two opposite edges of the window, but the image will be cropped.
Forground Image: Should be inside the window without affecting the aspect ratio, which means the image will be always touch two opposite edges of the window, but the image will not be cropped.
It doesn't matter if it's a <div> or an <img> tag, as long as they are displaying the images.
Asume also that the image sizes are known upfront and can be used in CSS or HTML part.
So my question is: is it possible using only CSS or CSS3?
If it's not possible I will accept the answer that will be as close as possible to my goal.
Examples:
When the background image is cropped from the top and bottom:
When the background image when it's cropped from left and right:
After looking at #Kent Brewster's answer, I think I could achieve all the requirements of OP.
This doesn't have the problem of foreground image being cropped and you can also specify constant margin around the foreground image. Also div is being used instead of img tag, because we are using background images. Here is the link and here is the code:
<div id='bg'></div>
<div id='fg'></div>
#bg {
position: absolute;
height: 100%;
width: 100%;
background-image: url(http://i.imgur.com/iOvxJ.jpg);
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
}
#fg {
position: absolute;
top: 10px;
left: 10px;
bottom: 10px;
right: 10px;
opacity: .7;
background-image: url(http://i.imgur.com/HP9tp.jpg);
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: contain;
}
Try this:
<html>
<style>
body {
margin: 0;
}
#bg {
position: absolute;
height: 100%;
width: 100%;
background: transparent url(bg.jpg) 50% 50% no-repeat;
background-size: cover;
}
#fg {
position: absolute;
height: 90%;
width: 90%;
top: 5%;
left: 5%;
background: transparent url(fg.jpg) 50% 50% no-repeat;
background-size: cover;
opacity: .7;
}
</style>
<body>
<div id="bg"></div>
<div id="fg"></div>
</body>
</html>
If the scaling requirement is flexible, it might work. See http://jsfiddle.net/k2h5b/5/ to see it run.
Yes, it's possible.
Basically I just made the background image the background for the <body> (doesn't have to be the body of course), and then put the image inside that with a small margin.
<body>
<img id='fg' src='http://3.bp.blogspot.com/-OYlUbWqyqog/TeL-gXGx3MI/AAAAAAAAHRc/bdqvvvaeC7c/s1600/bald-eagle3.jpg'></img>
</body>
css:
body {
margin: 0; padding: 0;
overflow: hidden;
background: url('http://wallpaper.zoda.ru/bd/2006/07/21/2c7b4306fd22f049f331d43adb74a5f7.jpg') no-repeat left top;
}
#fg {
margin: 20px 20px;
opacity: 0.7;
}
obviously if the window is too big, there'd be issues. You could (I guess) use media queries to pull in different image sizes based on window size.
edit — OK, well for the image, if you do want it to crop and retain the right aspect ratio, then I think you'll have to know the image size ahead of time to do it so that it works out. Lacking that, here's another revision.
<body>
<div id='fg'> </div>
</body>
css:
body {
margin: 0; padding: 0;
overflow: hidden;
background: url('http://wallpaper.zoda.ru/bd/2006/07/21/2c7b4306fd22f049f331d43adb74a5f7.jpg') no-repeat left top;
}
body, html { width: 100%; height: 100%; }
#fg {
margin: 2%; width: 96%; height: 96%;
opacity: 0.7;
background: url('http://3.bp.blogspot.com/-OYlUbWqyqog/TeL-gXGx3MI/AAAAAAAAHRc/bdqvvvaeC7c/s1600/bald-eagle3.jpg') no-repeat center center;
}
If you know the image dimensions, you could then set max-height and max-width. (I'll try that too :-)
edit again To get the background to crop in a centered way, you'd need to set the position to "center center" instead of "left top". (Or "center top" if you just want it centered horizontally.)
Vertically centering elements with CSS without cutting-edge non-standard features (flexible box layout) is hard. That may be something to do with JavaScript. I'll say that one problem with any JavaScript solution like that is that it really slows the browser down. If you must do it, I would suggest introducing a little time lag so that you don't try to recompute the layout on every resize event. Instead, set a timer for like 200 milliseconds in the future where the work will get done, and each time you do so cancel the previous timer. That way, while a person is dragging the window corner it won't burn up their CPU.
edit even more ooh ooh yes #Kent Brewster's answer with the vertical centering is good - I always forget that trick :-)
There is no way to achieve this effect using only CSS, for two main reasons:
Because you are trying to resize your image, you cannot use the background property and must instead use an <img> tag. Your image will always try to take up as much room as it can if the width and height are not set. Thus, the aspect ratio will not be maintained, or your image will be cropped.
The other caveat of resizing the image is that you will not be able to vertically-align it to the center of your page without knowing its dimensions.