What I was trying to do is have 2 divs with the same class side by side, one big in width and one small but both with the same background image.
The problem is when I use this code:
.div {
padding: 10px 0;
font-weight: bold;
margin-bottom: -40px;
color: #fefefe;
width: 100%;
position: relative;
background: url(/images/title_background.png);
background-position: center;
background-size: 100%;
}
The result is:
The first div looks good but the seccond one the background repeats, and if I change the backgroud-size to fill the seccond one the first one looks stretched and weird.
is it possible to have both with nicely fit background image withou having 2 diffent classes?
You can use background-size: cover; in order for the background to scale to the container.
MDN is a great resource for these kind of problems.
Related
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;
}
I have a "main-image" containing lots of small images which I "clip" into divs of fixed size by setting the background-position to some negative offsets. This works great!
Now I have a div with a size that changes during the lifetime of the web-page.
The old code had its own backgound-image with the background-size set to "contain". Something like this:
.dump {
display: inline-block;
background-image: url("/some/image.png");
background-repeat: no-repeat;
background-size: contain;
}
And that worked great too.
Now I'm trying to clip that background image from my "main-image".
E.g. My "main-image" has a size 1800px128px
The sub-image I like as background starts #1200px,10px with a size of 200px x 80px.
Is there a way to clip this rectangle and than scale to the dimensions of the containing div (which are unknown at the time of programming)
Thanks for the hint. However, I tried but can't get anything to work:
My problem is, that the div image should follow the height the containing div, so I can't tell size, or scale or zoom or whatever at the time of coding. I give an example:
<div style="width:100%; height:30%; text-align: center">
<div class="dump"></div>
</div>
Now, as I said: The image I want to appear as the background of div.dump is the 200x80px area from the main-image #origin(1200,10) AND I want that resulting image scaled to fit the hight of the container. So, I have a known translation, followed by an unknown zoom. Maybe it's just over my head.
I believe the best way to do this is using css transforms, I found this page for further reference on how to transform a background image and made this fiddle based on it.
The idea is that you will use the classes "icon" and "icon:before" to configure your sprite to fit in an element and use other classes like "smaller" and "bigger" to set the actual size of the element.
.icon
{
font-size: 2em;
text-align: center;
line-height: 3em;
border: 2px solid #666;
border-radius: 7px;
position: relative;
overflow: hidden;
}
.icon:before
{
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0%;
top: 0%;
z-index: -1;
background: url(http://blogs.sitepointstatic.com/examples/tech/background-transform/background.png) 0 0 repeat;
transform: translate(-50%, -50%) scale(1.5, 1.5);
background-repeat: no-repeat;
background-size: contain;
}
.smaller{
float:left;
width: 120px;
height: 120px;
}
.bigger{
float:left;
width: 200px;
height: 200px;
}
Because css transforms support percentage, the background will be clipped and scaled correctly, according to the size defined in "smaller" and "bigger"
I had an image which I had used as background in my css. I now want to have two images, one after the other. Think, earlier my website had one sponsor, now there are two sponsors, and so, two logos.
I was able to add two background images by googling around a bit, but the position of the second image is right on top of the first. When I give pixel values, it goes off as well.
This is my code so far
.app-header-logo {
background-image: url("../images/image1.png"),url("../images/image2.png");
background-position: center center, 200px center;
background-repeat: no-repeat;
float: left;
height: 50px;
vertical-align: middle;
width: 265px;
}
.app-header-logo a {
float:left;
width:190px;
height:50px;
text-indent:-999px;
}
How can I have image2 right after image1?
This can be accomplished by using CSS Sprites, with sprites you'll be able to combine multiple images into one single .png or .jpg file. There's a great online tool which will help you combine this images into one single file and to use them you just need to call a class for example .sponsor-1 which will contain the background-position for the Sponsor numer 1 image, plus it builds your CSS automatically so you don't have to worry about finding the right position of the background for each Sponsor image. Here's an example of how to use them:
.sponsor-1, .sponsor-2{
background: url(sprites.png) no-repeat;
}
.sponsor-1{
background-position: 0 0;
width: 80px;
height: 50px;
}
.sponsor-2{
background-position: -26px 0;
width: 80px;
height: 50px;
}
I am trying to add an image "logo.png" to the background of my page in the top right positioning. I am using css to do this and nothing else... here is what i have:
body {
background-image: url('logo.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right top;
background-color: #E6E6E6;
font-family: Arial;
font-size: medium;
}
I'm not sure what I am doing wrong, because no image is appearing
Check the file path where logo.png is located. Is it in the same level as your webpage?
here is a fiddle http://jsfiddle.net/z7d8kcLz/ that works. I really dont see any problem with your code
only change in your code is the link to dummy logo image
body {
background-image: url('http://www.hessionphysicaltherapy.ie/wp-content/uploads/2010/11/dummy-logo1.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right top;
background-color: #E6E6E6;
font-family: Arial;
font-size: medium;
}
Make a separate div for the logo, then experiment. Technically you should figure it out via trial and error. Load your page on google chrom, right click>inspect element and you will have a console like bar where you will have the srouce code. On your left find the div you are using and add various elements to it.
Try this:
Put your logo inside a DIV and put it right before the closing body tag.
.logo-div {
Width: 150px; /* Adjust as needed */
height: 150px; /* Adjust as needed */
position: fixed;
right: 0; /* Adjust as needed */
top: 0; /* Adjust as needed */
z-index: 1; /* Adjust as needed */
}
Evan, with CSS you need to create building blocks. In much the way you would draw on a piece of paper you need to tell CSS where it needs to place elements. Sounds simple, but given it if 3D and your don't see the 3D it makes CSS painful. Therefore it it were me I would reap elements in different html tags etc.
HTML
<body>
<div class="brand-group">
// use div tag for CSS background img insertions
<div class="brand-logo"></div>
</div>
// etc
CSS
body{
// width and height are important in the parent element. Without it CSS will just collapse
// going back to blank sheet of paper analogy. If you don't tell CSS the dimensions of the paper
// it will assume zero and start to build the document dimensions based on the elements you create
width: 1000px; // or use 100% or
min-height: 2000px;
// ... other body styling
}
// I like to use a wrapper as I can then place everything brand related into the wrapper
// e.g. logo, tagline, etc. I then position the wrapper and following that the elements within the wrapper
div.brand-group {
// I don't like static or fixed as you cannot use float, etc,, but I get why it is done
// position attribute is essential as you telling CSS who you want to position the logo relative to its parent
// in this case it is body (1000 x 2000)
postion: relative;
float: right;
// alternatively IF you use fixed or static then use this approach
// left: 100%
// left-margin: -215px; // adding 15px right gutter
// you can do something similiar using top if you want to push to top, but lets assume this is your first html element
width: 200px;
height: 100px; //you are not building the group size
top: margin: 15px;
}
div.brand-logo {
// easier to position logos using LESS or SASS as you have functions
// in pure CSS the easiest way to center the logo would be to look at the image dimensions'
// lets say it is 100px x 50px
left: 50%;
margin-left: -50px; // half the width of the image
top: 50%;
margin-top: - 25px; // half height
background-image: url('logo.png');
background-repeat: no-repeat;
background-color: #E6E6E6;
font-family: Arial;
font-size: medium;
}
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.