I have a div that I am giving a width of 60% to.
CSS
#image {
float:left;
width:60%;
background-image:url('cleaning.jpg');
}
HTML
<div id="image">
<img src="cleaning.jpg" />
</div>
My issue is that the image is being displayed at full size across the entire page!
How do I restrict it to the div it is being enclosed in?
Thanks!
As others have mentioned, you appear to be using two competing techniques - you've got a background-image on the container div, but you've also got the same image contained by the container div. Pick One.
For the background-image technique, you probably want to use something like:
#image {
width: 60%;
background:url('cleaning.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
The likelihood is that you need to manage the overflow of the element.
Try the following:
#image {
float:left;
width:60%;
background-image:url('cleaning.jpg') no-repeat;
overflow:hidden;
}
The issue you are having is that you set the parent div to have a width of 60%. You did not give the specific image element for that div a specific width. I hope this helped, I'm not 100% sure that I am correct but that is what this site is for, a question and answer format to help you work your bugs out. The issue how I see it is that you are setting the width of the specific div, and adding a background image to it which would not require you to set a <img></img> element. So in reality you have two copies of the image in the same spot, one which is 60% width, the second full size image covers the other. You must set the <img></img> element's width.
CSS:
#image {
float: left;
width: 60%;
/* No need for a background image to be set if you're using <img></img> */
}
#image img {
width: 100%;
}
Im not sure why you have a background image and a normal image. Background images will never scale with the container. I think your problem however is you need to set your image width as well. try
CSS
#image {
float:left;
width:60%;
background-image:url('cleaning.jpg');
}
#image img {
width:100%;
}
HTML
<div id="image">
<img src="cleaning.jpg" />
</div>
Example with http://jsfiddle.net/f5Ls3/
Example without http://jsfiddle.net/f5Ls3/1/
Related
I made a comment system and there are profile photos next to text but when someone comments profile pictures' widths are changing--something like this:
.container img {
float: left;
margin-right: 20px;
border-radius: 50%;
}
<img src='".$row2['photo']."' alt='pp' style='width:6%' style='height:auto' >
Because of the height:auto;, this is happening. Try setting a height of 6% also
<img src='".$row2['photo']."' alt='pp' style='width:6%;height:6%' >
By the way you only need on style attribute to us inline-styling as I did in code.
try using pixels with width instead of percentages.
The element width and height should be equal to make a perfect circle. Since the images have different dimensions, You can use the background-image instead technique
<div class='profile-pic' style='background-image:url(".$row2['photo'].")'></div>
CSS
.profile-pic{
height:50pt;
width:50pt;
border-radius:50%;
background-color:#eee;
/*background image syles*/
background-size:cover;
background-position:center;
background-repeat:no-repeat;
}
I'm a beginner and I tried to make one page by myself, however, the result is not good. I will try to explain what I need: Full-screen page with two images, one image will cover 50% of horizontal space of browser window, and second image will be on right side covering the rest of this page. I need both images to be responsive and to always keep 100% height. When the window is resized, left and right sides of both images will be cropped.
Very similar to this: http://www.gt3themes.com/website-templates/soho/striped_landing.html
Is this difficult to make? I tried to follow some guides on the web, but the result was that my images were stretched and not cropped. Maybe I am completely wrong and I need to create two columns and then put images inside?
I will appreciate any help.
My current code is:
.photo{
size: 100%;
position: relative;
overflow: hidden;
}
.photo img{
max-width: 50%;
height: 100%;
}
The site you linked more or less did something like this:
http://jsfiddle.net/xnLn6s5o/
HTML
<div id="container">
<div id="left" class="halfwidthcontainer">
<div id="left-image" class="image"></div>
</div>
<div id="right" class="halfwidthcontainer">
<div id="right-image" class="image"></div>
</div>
</div>
CSS
html, body, #container, #left, #right, #left-image, #right-image {
height:100%;
}
.halfwidthcontainer {
float: left;
width: 50%;
}
.image {
background-size: container;
background-repeat: no-repeat;
background-position: 50% 50%;
}
#left-image {
background-color: red;
background-image: url('');
}
#right-image {
background-color: blue;
background-image: url('');
}
The general idea is that two containers sit side by side, floated (see this answer as why to use floats to position containers side by side instead of inline-block).
The idea thereafter is to explot the CSS background property which will allow you to get the overflow/positioning effects you want. You can read more about that here.
You're going to want to fill in the background-image properties of the #left-image and #right-image IDs to add the images you want.
Am new to html. I went through similar questions but none solved my problem. Can anyone help. Thanks in advance.
The File location is correct.
My code:
<div id="bg">
</div>
Css:
#bg{
background-image: url("bg.png");
}
Try this:
For demonstration i used 500px x 500px you can go with 100% x 100% too preferable with a container wrapped around the div. You don't need display: block; here in your css because a div already has display block as a standard for most browsers.
#bg{
width:500px;
height:500px;
background-image: url('bg.png');
}
Also be sure that the width and height matches the width and height of your image.
Your map with your files should be looking something like this:
index.html
bg.png
mycss.css
... many other .html / .php / .css
If you want to use a container, your css would look something like this. Try using container if you're going to work more with css, it's a really good thing too use for different browser sizes.
#bg{
width: 100%;
height: 100%;
}
.container{
width: 500px;
height: 500px;
}
And your HTML
<div class="container">
<div id="bg"></div>
</div>
The path is wrong, check my comment under the question. The Image should be in the same place as the css or the path should be url('../bg.png'); if it is up one level etc.... try this and if it comes p red the path is wrong
#bg {
background: #ff0000 url("bg.png") no-repeat right top;
}
As you are setting the background-image of a div that div must contain something. And the background-image will sized accordingly with the size of the element contained inside the div.
Try this,
#bg{
background: url("http://www.mascotdesign.com/_dev/images/famous-cartoon-character-mickey-mouse.png");
background-size : 100% 100%;
background-repeat : no-repeat;
}
jsFiddle
I always wondered if this was possible without JS.
This is one of those situations where you can see that there is still a gap between devolpers and designers, hope we can help close it here :)
Here is a great explanation of how to do it (but for elements smaller than the container only)
http://css-tricks.com/centering-in-the-unknown/
//HTML
<div class="something-semantic">
<img class="something-else-semantic" src="wtvr"></img>
</div>
//CSS
.something-semantic {
display: table;
width: 100%;
}
.something-else-semantic {
display: table-cell;
text-align: center;
vertical-align: middle;
}
Best solution I've used as of late is half-hack, half-awesome.
<div class="something-semantic" style="background-image: url( {{src}} )">
<img class="something-else-semantic" src="{{src}}" />
</div>
//CSS
.something-semantic {
position:relative; /* or something other than static */
background-repeat:no-repeat;
background-size:contain;
background-position:center center;
}
.something-semantic img{
width:100%;
height:100%;
opacity:0;
}
So for an image gallery, I'd inject the image src into inline background-image property and the <img> src attribute.
Making the REAL image completely transparent (but still visible), allows for alt tags, title, etc. Using background property lets you constrain the image dimensions to whatever size container you'd like.
the images top and left corners will always be flush with the container div, unless you know the size of the image and can give it ax explicit negative margin.
example fiddle http://jsfiddle.net/rHUhQ/
depending on the situation you can just give the image a class that styles it how you want since apparently it's container isnt that important (if it can be covered by the image in the first place).
I have an image I'd like to show in a browser such that:
If the image is smaller than the browser viewport, the image is centered
horizotally and vertically.
If the image is larger than the viewport, the image is scaled down to fill
as much of the viewport as possible without adjusting the aspect ratio of the
image. Again, the image is centered horizotally and vertically.
I do not want to use JavaScript; what's the best/most semantic HTML and CSS to do this?
Update I've been asked for clarification regarding semantics: the image is content; the only content within the HTML.
Solution
#GionaF ideas got me to a happy (and very simple) solution:
HTML
<!DOCTYPE html>
<head>
<title></title>
<LINK href="test2.css" rel="stylesheet" type="text/css">
</head>
<body>
<div>
<img src="photo.jpg" alt="photo" />
</div>
</body>
CSS
img {
max-width:100%;
max-height:100%;
position:absolute;
top:0; left:0; right:0; bottom:0;
margin:auto;
}
You can achieve it in many ways, but i can't be "semantic" without knowing the context (is the image the main/only content of the page? is it in the middle of a blog post?), so i'll go for a div.
1. position:absolute; + margin:auto;
Support: crossbrowser
HTML
<html>
<body>
<div id="container">
<img src="your-image.jpg">
</div>
</body>
</html>
CSS
html,body,#container {
height:100%;
}
#container {
width:100%;
position:relative;
}
#container > img {
width:100%;
max-width:400px; /* real image width */
position:absolute;
top:0; left:0; right:0; bottom:0;
margin:auto;
}
Demo
2. display:table; + display:table-cell; + vertical-align:middle;
Support: IE8+, all other browsers - with IE7 fallback (Source 1) (2) (3)
HTML
<html>
<body>
<div id="container">
<span> /* it's important that you use a span here
not a div, or the IE7 fallback won't work */
<img src="your-image.jpg">
</span>
</div>
</body>
</html>
CSS
html,body,#container {
height:100%;
}
#container {
width:100%;
display:table;
*display:block; /* IE7 */
}
#container > span {
display:table-cell;
*display:inline-block; /* IE7 */
vertical-align:middle;
text-align:center;
}
#container > span > img {
width:100%;
max-width:400px; /* real image width */
}
Demo
3. background-size:contain;
Support: IE9+, all other browsers - with vendor prefixes (Source 1) (2)
HTML
<html>
<body>
<div id="container"></div>
</body>
</html>
CSS
html,body,#container {
height:100%;
}
#container {
margin:0 auto;
max-width:400px; /* real image width */
background:url(your-image.jpg) 50% 50% no-repeat;
background-size:contain;
}
Demo
Be careful for how IE8 renders height:auto;, may not keep the ratio.
Edit: i just realized that you wrote "without adjusting the aspect ratio of the image". If you really don't want to keep the ratio, it's easier ... but do you really mean that?
You won't be able to accomplish this unless you have a set height for the container that houses the image. In order for the viewport to know where to have the image centered, it will need know the full height you are working with, as opposed to staying the same size as the image. Height will only expand if it is told to, or if there is actual content filling it up.
To center horizontally you will need to set a container around the image and give it a margin of '0, auto'. Set the image width to be 100% within the container (this will keep the proportions correct as the height will scale appropriately with it), and give the container a percentage based width as well.
You will need to give your image or surround div a set width and height for margin: auto to center the image. See how the code below works for you.
Css
#container {
width: 1000px;
height: 1000px;
}
#img {
background-color:#000;
width: 100px;
height: 100px;
margin: 0 auto;
}
HTML
<div id="container">
<div id="img">
</div>
Edit
Set image as background?
Then set the body to 100%.
body
{
background-image: url('background.jpg');
background-repeat: no-repeat; /* you know... don't repeat... */
background-position: center center; /*center the background */
background-attachment: fixed; /*don't scroll with content */
}
I wasn't able to find a perfect solution (from what I've read it's not possible to do what you want using only CSS and HTML). But I've found a solution closer to what you need. I repeat, it's not perfect. So here it goes (you actually put your image as a background for a div):
#mydiv {
width: 100%;
height: 100%;
position: relative;
background-image: url(photo.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: auto 98%, cover;
}
So, the key here is the background-size property. What it does here: force the image to scale (up or down) to a specified percentage of the width/height of the div/container (the width and height of the div is dictated by the viewport). For images bigger than viewport, this solution is good, but the problem is with smaller images (which are scaled up). Unfortunely, the current implementation of CSS doesn't permit to specify a max-height or max-width for the background-image. If you want to read more on this subject open this webpage: http://www.css3.info/preview/background-size/.
Anyway, a JavaScript solution is better. Hope it helps.