I created this class with CSS:
.leaf {
background: url();
position: fixed;
background-size: 300px;
z-index: 0;
height: 206px;
width: 300px;
top: -5%;
left: -7%;
}
Which shows a leaf in the background. What I want to do is to not make this image move when the page is zoomed, or even when the display's width is less then 1024px. It has to stick in that position!
Thank you very much
Related
Here's the live link of the my project - http://sunwaycleanairproject.com/pledge
I have 3 images placed around the corners of the tiles -
<div class="back-top-right"></div>
<div class="back-bottom-right"></div>
<div class="back-bottom-left"></div>
.master-container .back-top-right {
position: absolute;
top: 2%;
left: 78%;
background: url(../../images/27.png) center center no-repeat;
width: 248px;
height: 214px;
content: ' ';
}
.master-container .back-bottom-left {
left: -22px;
bottom: 40px;
background: url(../../images/28.png) center center no-repeat;
width: 248px;
height: 253px;
}
.master-container .back-bottom-left {
left: -22px;
bottom: 40px;
background: url(../../images/28.png) center center no-repeat;
width: 248px;
height: 253px;
}
How can improve my css so that the images will move according to the container and stay in place?
I'm working on a 15 inch macbook pro screen, and fullscreen it looks good. If I viewed this website on different screen sizes(larger ones especially), these images will be all over the place. I want them to always stay in place, always at the corners of the grid container.
make the size fixed for some screens. Mediaqueries will help
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.
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 am building a customization script where a user can upload an image and drag it around a template image to get a desired result. The problem is the template image is over 1000px tall and wide, so I put it inside a container limiting it's height/width.
How do I make it so the uploaded image is scaled exactly the same so when I create the image via PHP I can take the left: and top: CSS values and apply them to the much larger template image and uploaded image?
Current CSS:
#template {
position: relative;
padding: 0;
width: 500px;
height: 500px;
z-index: 1;
}
#uploaded {
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
I'm not quite sure if that is what you are asking for … anyway:
The CSS3 property background-size: 100% lets you specify that the background image of should fill out the container's size and stretch proportionally. Together with background-repeat: no-repeat it might be what you are looking for:
#uploaded {
height: 500px;
width: 500px;
background-image: url(...);
background-size: 100%;
background-repeat: no-repeat;
}
Demo: http://jsfiddle.net/pu76s/3/
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