If I give some value to the height the background image is displayed, but it doesn't show when set to auto. I don't know why?
<!DOCTYPE html>
<html>
<head>
<title>pageloading</title>
<style>
#topheader{
background-image:url("header.png");
background-repeat:no-repeat;
background-size: cover;
width:100%;
height: auto; /* it works if i give some px */
}
</style>
</head>
<body>
<div id="topheader">
</div>
</body>
</html>
Does anyone know the reason?
that because 'div' will fit his size to its content,
in your case the div is empty and thats why he didn't show the background image,
unless you give him Measurement size in pixels.
height: auto gives the div a height of 0 because there is no content in it and it automatically adjusts the height.
Related
So, I have a website I'm making for school. I'm trying to add an image in CSS so I can add style's to them, but it won't show. The linking is absolutely fine since when I type any letters in the div I'm using for the image, it shows up in the parameters of the text! This is confusing, so i'll show you:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HELLO</title>
</head>
<body>
<div class="fullImg">
<!-- if I say something like 'HI' in this div, part of the image shows up, but not without it! -->
</div>
</body>
<style type="text/css">
.fullImg {
background-image: url('img.jpg');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
height: 100%;
}
</style>
</html>
Without any content your div has a height of 0, therefore no background image is visible. You’ll need to do something to ensure the div has a nonzero height. There are a variety of ways to do it, including setting height: 100vh or min-height: 400px. Setting height: 100% is ineffective if the containing element has zero height.
You should place stylings in the head element of the page
You have to put the following CSS style rule before .fullImg
html, body {
height: 100%;
}
I've encountered a problem that I can't display full background image.
The code is below.
I think it can work,but it doesn't work.
The image displayed only based on line count.
Please tell me how to display full sized image.
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>test</title>
<style type="text/css">
<!-- .tests {
background: url(contents01_left_bg.png);
background-position: center top;
background-attachment: fixed;
background-repeat: no-repeat;
-moz-background-size: cover;
background-size: cover;
}
-->
</style>
</head>
<body>
<div class="tests">
a</br>
a
</div>
</body>
</html>
After rethinking your question, I believe the best approach is not to use a background image. If you place the image as regular content to a container, that container will expand to the full size of the image.
Then, you can create another container for the rest of the content and float that content over the image.
The result is the full sized image with other content above it and you don't have to worry about repeating images or aspect ratios.
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>test</title>
<style>
#parent { border:1px solid black; }
.tests {
float:left;
}
</style>
</head>
<body>
<div id="parent">
<img src="http://findicons.com/files/icons/963/very_emotional_emoticons/128/128_33.png">
<div class="tests">
a<br>
a
</div>
</div>
<div>
<p>More content</p>
</div>
</body>
</html>
If you're looking for a full background image, with the whole image visible in the element, you need to make the element match the aspect ratio of the background image. Otherwise, the element will just be as tall/wide as the content inside of it. If you have the image dimensions, you can use padding or padding on a pseudo element of the parent to recreate the aspect ratio of the image, then the div will always be the same aspect ratio of the image, showing the whole thing instead of just what will fit based on the content.
To recreate the aspect ratio, divide the height of the image by the width (800 / 1200 in my example), multiply by 100 to get a % (66.6666666666%), and apply that as padding-bottom of the parent or a pseudo element of the parent.
body {
margin: 0;
}
div {
background: url('http://weknowyourdreams.com/images/monkey/monkey-04.jpg') 0 0 no-repeat / cover;
height: 0;
padding-bottom: 66.6667%;
color: white;
}
<div>
a<br>
a
</div>
Try using
img {
width: 100%;
max-width: 100%;
height: auto;
}
Given the following code, why does html,body {height:100%} allows the image to be responsive (allows measurements of its children to be written in percentage + works) at both height and width properties, but html, body{width:100%} only allows width to be responsive? If you could go in bit of detail how the browser treats width/height:auto (which I believe is the default value if nothing is selected), that would be great!
JSBin: https://jsbin.com/dafejayasi/edit?html,output
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
html, body{
height: 100%;
margin:0;
padding:0;
}
.image{
height:40%;
width:50%;
}
</style>
<body>
<img class = "image" src="http://www.placehold.it/700x300" alt="Image of storefront">
</body>
</html>
by doing body's or html's width 100% or height 100% or both in together does not effect on anything on the body in this case !
Now given code will give you a brief understanding about how percentage works in browser
.image{
width:100%;
//height not mention!
}
in this case browser will select the height auto , that means the actual height of the image. when only if width change then height will change according to the the width. if width goes bigger height will goes bigger . nothing matters if only height changes
.image{
height:100%;
//width not mention
}
now exact opposite case will be happen of above !
.image{
width:100%;
height:100%;
}
here if width changes it will not effect on height and vice versa !
thanks!
here is my code:
<!DOCTYPE html>
<html>
<head>
<style>
div.img1 {
display:block;
float: left;
margin:0px;
padding: 0px;
border-color: #384b5d;
border-style: solid;
text-align: center;
}
</style>
</head>
<body>
<div class="img1">
<img src="http://www.hotelseaviewdiu.co.in/wp-content/uploads/2014/10/Business-Meeting.jpg" width=50% height=50%>
</div>
</body>
The problem that is occurring, is that the border around my image is wider, maybe by 50px on each side, whereas the height of the border rests just fine on the image. I am new to CSS, and not really sure why this is happening.
This is all within google site's HTML box as well.
I adjusted the width and height to create a smaller image with an adjusted ratio. When I eliminate these ratio %'s, the border fits perfectly, both height and width, so I assume the problem is somewhere within my image adjustment within the
<img src>
tag.
Thank for any and all help. I really appreciate it.
Regards,
Just apply the border to div.img1 img instead and keep the text-align property of the div:
http://codepen.io/cavanflynn/pen/NGKWyE
I have a large image file (3838x1049) generated from a dual screen screenshot and I need to create 2 HTML files with each file displaying one half of the image.
I was able to achieve that by using the background sprites and specifying the portion of the image I want to see.
The problem is that the image is displayed in its original size which is larger than a typical monitor resolution. I need it to resize automatically to fit the screen while preserving the aspect ratio.
Can anyone help ?
Here is my current code for displaying the right portion of the image:
<html>
<head>
<style>
img.home {
width: 1899px;
height: 1020px;
background: url(dashboard.jpg) -1930px -1px;
}
</style>
</head>
<body>
<img class="home" src="img_trans.gif"><br><br>
</body>
</html>
Dont have Enough reputation to comment thats why i am putting it in here.
try adding the both styles in a main container then apply the approach of width percentage
<style>
imgMainContainer{width:100%;}
</style>
then put both the right and left images in the main container with widths 100% for each. following is the old answer so consider above only
Try using the percentage instead of pixels in background height and width.
<html>
<head>
<style>
img.home {
width: 100%;
height: 100%;
background: url(dashboard.jpg) -1930px -1px;
}
</style>
</head>
<body>
<img class="home" src="img_trans.gif"><br><br>
</body>
</html>
CSS
.leftImg{
background:url('http://upload.wikimedia.org/wikipedia/commons/2/26/Kluft-hoto-Black-Rock-Desert-Aug-2005-Img_5081.jpg');
background-size:200% 100%;
width:50%;
height:100vh;
}
.rightImg{
background:url('http://upload.wikimedia.org/wikipedia/commons/2/26/Kluft-photo-Black-Rock-Desert-Aug-2005-Img_5081.jpg');
background-size:200% 100%;
width:50%;
height:100vh;
background-position: right top
}
and HTML
<div class="leftImg"></div>
<div class="rightImg"></div>
Try this