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;
}
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%;
}
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.
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
A short question from a newbie designer...
Say I have a <div class="red"> folowed by a <div class="filler">.
If I use margin-left:10% on the first div and I use a background image on the second div (height=1px and width=300px) and I repeat it vertically and start it left: 10%, they won't align...
Why not?
HTML:
<!doctype html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="test">
</div>
<div class="filler">
</div>
</body>
</html>
CSS:
html, body {
height: 100%;
}
.test{
background-color: red;
width: 300px;
height: 300px;
margin-left: 10%;
}
.filler{
width:100%;
height: 300px;
background: url(../img/test.jpg) top left 10% repeat-y;
}
Maybe I'm missing something, but what?
Thanks a lot!
In the case of background images, using a percentage as a position has a special meaning.
It does not (as you might expect) align the left edge of the image at the percentage you give, but rather it aligns the percentage with the percentage.
Okay, that makes no sense in words!
Basically, it's like this:
0%:
[IMAGE ]
50%:
[ IMAGE ]
100%:
[ IMAGE]
Does that make more sense? The best way to fix this is to just add the margin-left:10% to the .filler instead of positioning the background.
I'm trying to establish a layout with in the base three rows: A header, content and footer div.
The two outer most div's are of a fixed height; The center div has to be fluid and adapt itself to the height of the browser screen.
Could someone point me in the right direction how to tackle this with proper CSS? For now I'm not yet interested in a javascript solution. As CSS doesn't provide a clean answer, a javascript solution comes eminent!
This is how far I came:
<div id='header'>Header</div>
<div id='content'>
<div id='innerContent'>
This is the fluid part
</div>
</div>
<div id='footer'>footer</div>
css:
#header {
position:absolute;
top:0px;
left:0px;
height:100px;
z-index:5;
}
#content {
position:absolute;
top:0px;
left:0px;
height:100%;
z-index:2;
}
#innerContent {
margin-top:100px;
height:100%;
}
#footer {
height:400px;
}
EDIT:
I'm sorry, I feel embarassed. I made something similar about a year ago, but at first I didn't think it was possible to adjust it to this situation. Apparently it was.
As I think other's have already said, it is possible to put the footer div at the bottom by positioning it absolutely. The problem is to adjust it's position when the content div gets larger. Since the footer is absolutely positioned it won't follow the content div's flow, which makes it stay at the same place even though the content expands.
The trick is to wrap everything in an absolutely positioned div. It will expand if it's content gets larger, and the footer div will be positioned according to the wrapper's borders instead of the document's borders.
Here's the code. Try to put a bunch of <br /> tags within the content div and you'll see that everything adjusts.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Layout test</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#wrapper {
min-height: 100%;
min-width: 100%;
position: absolute;
}
#header {
height: 100px;
background-color: red;
}
#content {
background-color: gray;
margin-bottom: 50px;
}
#footer {
height: 400px;
min-width: 100%;
position: absolute;
bottom: 0px;
margin-bottom: -350px;
background-color: blue;
}
</style>
</head>
<body>
<div id="wrapper">
<div id='header'>Header</div>
<div id='content'>
Content
</div>
<div id='footer'>footer</div>
</div>
</body>
</html>
ORIGINAL:
Sadly, css lacks a clean way to do this. You don't know the viewport height (which you called h) and therefore can't calculate h-100-50 You have to build your website so that most people will see 50px of the footer div. The way to do that is to set a min-height for the content div.
The min-height value must be derived from some standard viewport height. Google Labs have published their data on viewport sizes for their visitors and made a great visualization of it here:
http://browsersize.googlelabs.com/
I design for my own viewport, which is 620px high (according to google ~80% have this viewport height). Therefore the min-height for the content div should be 620-100-50 = 470 px.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Layout test</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#header {
height: 100px;
background-color: red;
}
#content {
min-height: 470px;
background-color: gray;
}
#footer {
height: 400px;
background-color: blue;
}
</style>
</head>
<body>
<div id='header'>Header</div>
<div id='content'>
Content
</div>
<div id='footer'>footer</div>
</body>
</html>
If I understand your problem correctly I think this might lead you into the right direction.
http://jsfiddle.net/mikevoermans/r6Saq/1/
I'll take a poke at it. Not sure if I read your screenshot correctly but I set the content div to be 50-100px in height.
Here is my jsfiddle: http://jsfiddle.net/AX5Bh/
I am using the min-height and max-height CSS attributes to control the #innerContent div.
If you horizontally expand the result window you will see that some of the text is highlighted . I have set the content to be hidden if it is larger than the #innerContent div. You might want something different. I only highlighted the text with an <em> tag to demonstrate that max-height was working.
If you remove all the text but the first sentence you will see it is 50px in height.
Here is a link to browser support of min-height and max-height: http://caniuse.com/#search=max-height