I have a div containing a background image that I want to keep aligned in the bottom right corner but I want the image to scale depending on the size of the browser window. What I currently have is:
backgnd {
background: url(img/roneggler.png) no-repeat;
position: fixed;
bottom: 0px;
right: 0px;
width: 1000px;
height: 1000px;
}
I have tried to set the width and height values to 100% but that messes with the position of the div. The link of this page can be found here: http://inetgate.biz/ron.eggler/
You should use background-size: cover and width and height 100%;
backgnd {
background: url(img/roneggler.png) no-repeat;
position: absolute;
background-size: cover;
bottom: 0px;
right: 0px;
width: 100%;
height: 100%;
}
CSS:
.container{
width:100%;
}
you can use jQuery:
var w = $(window).width();
$('.content').css('width', w);
Okay,
I got it now, the final solution looks like:
.backgnd {
background: url(img/roneggler.png) no-repeat;
background-size: contain;
background-position: right bottom;
position: absolute;
bottom: 0px;
right: 0px;
width: 100%;
height: 100%;
}
The trick was t use background-size: contain; instead of cover to not get the image to scale up all the way on big screens.
Related
How can I have an image always covering all the screen regardless of monitor sizes? I have an image which has a height of 1000px and a width of 1000px. I don't want the image to be repeated but I don't want the scrolling bar to appear as well. If I use % the image is repeated, because it's inside a div. Thank you
I want the bottom of the image to be always at the bottom of the browser page and the div/image to be always the same size, even if I zoom with the browser
div {
width: 1000px;
left:0%;
right:0%;
top: 0%;
height: 800px;
text-align:center;
position: absolute;
background-image: url("image.png");
background-position: 50% 50%;
margin:auto; }
Try this out
div {
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;}
If you still want to know more, do check out this link
https://www.w3schools.com/howto/howto_css_full_page.asp
well if you want set up a full image background that is also responsive, you can do the following:
div {
width: 100%; height: 100%; top: 0; left: 0;
background: url(images/bg.jpg) no-repeat center top; position: fixed; z-index: -1;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
If you want to add this image as background image you can add the below css
div {
width: 100%;
height: 100%;
background: url(images/bg.jpg) no-repeat center top;
position: fixed;
z-index: 0;
}
Or if you want image to be show you can do the below things
<img src="images/bg.jpg" style="width: 100%;height :100%">
if (screen.width>=500){document.write(" body{zoom:78%;}");}
Here's the solution for my code, I needed to change the zoom.
I am doing an animation with HTML and CSS3 and I need adapt along with the background image. The problem is that the content stay within that div. I put the height and width fixed for this but don’t work. When I try using dynamic proportions (% or auto) and background-size: contain; the animation does not follow the original path.
With fixed size following the path:
and mobile works fine too
but, not is responsive:
With dynamic size is responsive, but not follow path:
Changed code:
#main{
position:relative;
- left: 0;
- height: 1366px;
- width: 980px;
+ // left: 0;
+ height: 100%;
+ width: 100%;
overflow:hidden;
background: url('../images/bg.png');
background-repeat: no-repeat;
-
+ background-size: contain;
}
DEMO
This is my index.html
<div id="main">
<div class="participant" style="z-index: 4;">
<div class="car">
<img class="photo" src="https://scontent-atl3-1.xx.fbcdn.net/v/t1.0-1/c21.21.259.259/s50x50/529297_568082979888645_1727470385_n.jpg?oh=c75505b8b23ff9abd26be1fd5771f81d&oe=582BAD0F" alt="">
<img class="sprite" src="http://i.imgur.com/OwYhg9T.png" alt="">
</div>
</div>
</div>
And my animation.css
#charset "utf-8";
/* CSS Document */
body, html {
height: 100%;
}
body {
padding:0;
margin:0;
}
#main{
position:relative;
left: 0;
height: 1366px;
width: 980px;
overflow:hidden;
background: url("http://i.imgur.com/G4gs6EG.png");
background-repeat: no-repeat;
}
#-moz-keyframes move
{
from {
right: -30%;
top: 8%;
}
to {
right: 140%;
top: 80%;
}
}
#-webkit-keyframes move
{
from {
right: -30%;
top: 8%;
}
to {
right: 140%;
top: 80%;
}
}
.participant {
position: absolute;
display: inline-block;
height:200px;
width: 200px;
right: 140%;
top: 80%;
-moz-animation:move 10s linear infinite;
-webkit-animation:move 10s linear infinite;
}
.sprite{
width: 100%;
height: 100%;
}
.photo{
position: relative;
top: 128px;
left: 99px;
width: 50px;
height: 50px;
}
This is a little tricky and requires fixed aspect ratio of the background image.
1. Make everything responsive.
First of all, it won't work if everything is %-based but the car is px-based (because if you resize your window everything will get smaller but the car will stay the same), so for starters you are going to have to change the size of your car to percentages.
2. Fix aspect ratio.
Then you need to fix the aspect ratio using mix of absolute and relative positions and paddings.
In your case your wrapper's CSS will look something like:
width: 100%;
padding-bottom: 71.74%; /* 980/1366 = ~ 0.7174 */
(your background image is 980x1366px)
DEMO
3. FUTURE PROOF: Fill the screen on every screen.
Unfortunately you can't do much about white space around your image because of the aspect ratio itself, I'd personally look for a 16:9 image for the background and it will fit most of the desktop/laptop screens perfectly, if you need to cover wide range of screens then you should use media queries with different-sized backgrounds.
Remember to adjust the padding-bottom of your container along with the image itself.
Hope it helps!
Try replacing height and width in your #main css class to:
#main{
height: 100%;
width: 100%;
background: url("http://i.imgur.com/G4gs6EG.png") no-repeat fixed center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I've got this working on codepen.io
http://codepen.io/NosNits/pen/RRqzPy
I', hoping this makes sense but I have HTML code that I have a child which is an svg animation, I'm wanting to have the section responsive so that the position of the svg stays where its meant to be on the map.
I have selected the coast of Africa as a point that I want to keep the SVG in place when the page is resized, but when it is resized you will see that the red marker moves across the rest of Africa.
You can see the jsFiddle for the Source Code and see the result to the full map.
.about-header__map .angola {
position: inherit;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.about-header__map .angola svg {
top: 49%;
left: 42.5%;
position: absolute;
}
Use the width of the image (1440px) instead of width:100%
.about-header__map {
background: url(http://i.imgur.com/ZqQvEUK.png) no-repeat center center !important;
width: 1440px; /*here */
background-size: cover;
height: 500px;
position: absolute;
z-index: -1;
}
FIDDLE
Use a fixed width in .about-header__map
.about-header__map {
background: url(http://i.imgur.com/ZqQvEUK.png) no-repeat center center !important;
background-size: cover;
height: 500px;
position: absolute;
width: 1500px;
z-index: -1;
}
I've tried every answer I could find on all the sites I could find, but still haven't been able to properly resize an image using CSS. I've got it inside a div, and tried resizing either one and resizing both. I'm trying to fit the image (underneath my navigation bar) to the page (meaning: as wide as the page, and relative height).
<div id="banner"><img src="resources/img/banner.png" class="myImage"></div>
First attempt:
.myImage{
max-width: 100%;
height: auto;
left: 0px;
right: 0px;
}
Second attempt:
#banner{
max-width: 100%;
height: auto;
left: 0px;
right: 0px;
}
Third attempt:
<div id="banner"><img src="resources/img/banner.png" id="myImage"></div>
#banner{
max-width: 100%;
height: auto;
left: 0px;
right: 0px;
}
#myImage{
max-width: 100%;
height: auto;
left: 0px;
right: 0px;
}
If your image is smaller than the screen, it will use the image width. If it is bigger, it uses max-width. So assuming your image is smaller than the display, you want to change your "max-width" to "width" to increase the image size.
<div id="banner"><img src="resources/img/banner.png" id="myImage"></div>
#banner{
max-width: 100%;
height: auto;
left: 0px;
right: 0px;
}
#myImage{
width: 100%;
height: auto;
left: 0px;
right: 0px;
}
The CSS property background:cover will help you!
html {
background: url(images/bg.jpg) no-repeat center center fixed;
background-size: cover;
}
Cover will extend your background to full screen.
CSS-Tricks has the best solution for this that I could find
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Link to CSS-Tricks for the source and original code: https://css-tricks.com/perfect-full-page-background-image/
Did you remember to link to your stylesheet? I was just having this issue, then I realized that I forgot to link to the CSS and face-palm.
You have to give the id banner a specific width that is less than 100%. You don't need a height, it already is automatic. You have to target the image inside the banner and not the class added to the image. So it should look like this:
<div id="banner"><img src="resources/img/banner.png" class="myImage"></div>
#banner{
width: 60%;
left: 0px;
right: 0px;
}
#banner img{
width: 100%;
left: 0px;
right: 0px;
}
I want to fill my page with a background image and have the text aligned in place with that background. With the below code, the background image loads at the top of the page, and the text goes under it. I know I can use the "background: " function, but the way it is done in my below code allows for automatic resizing, regardless of browser size (i.e., mobile devices have small browser sizes). So, I just want the background image to go behind the text.
<html>
<head>
<title>Title</title>
<style>
img.bg
{
min-height: 100%;
min-width; 781;
width: 100%;
height: auto;
top: 0;
left: 0;
z-index: -1;
}
#media screen and (max-width: 781)
{
img.bg
{
left: 50%;
margin-left: -390.5;
}
}
#container
{
position: relative;
width: 781;
margin: 50 px auto;
height: 758;
border: 1px solid black
}
#left
{
position: relative;
left: 1.280409731113956%;
top: 14.51187335092348%;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
width: 50%;
height: 50%;
color: #FFFFFF;
position: relative;
}
p
{
font: 14px Georgia;
}
</style>
</head>
HTML
<img class="bg" src="background.jpg">
<div id="container">
<div id="left">
<p>
Text
</p>
</div>
</div>
</body>
</html>
Make your BG image have a z-index of 1, and your #container div to have a z-index of 2. Does that work?
img {
position: relative;
z-index: 1;
}
#container {
position: relative;
z-index: 2;
top: 0px;
left: 0px; /*or whatever top/left values you need*/
}
Just use position: fixed for your background image http://dabblet.com/gist/3136606
img.bg {
min-height: 100%;
min-width: 781px;
width: 100%;
top: 0;
left: 0;
position: fixed;
z-index: -1;
}
EDIT (I wish there was a way to make it more visible than this)
OK, after reading the comments for the original question, I understand that the purpose is to have a background that scales nicely for any display sizes.
Unfortunately, quite a lot of mobile devices have a problem with position: fixed - you can read more about this here.
So the best solution in this case is to use a background image, not an img tag, having the background-size set to 100% (which will stretch the image - example), or to cover (which will scale the image such that it completely covers the screen - example)
Well, maybe you can also try that css:
body{
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
it's should cover all youre page even when page size is changed