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%;
}
Related
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;
}
I have a html file with div for which I want to add an background using CSS so that I can change it using jQuery or JavaScript.
In HTML file:
<html>
<head>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<div id="mydiv">
</div>
</body>
</html>
In style.css I have:
#mydiv {
background-image: url("images/bg.png");
width: 100px;
height: 100px;
}
it is showing a blank page what is an error in this simple code
Your code was fine, but you needed a defined width and height for your <div>. Also, I replaced your image so you could see that it does work.
http://jsfiddle.net/d4pyokh9/1/
Your div doesn't have any content, therefore it's not going to show anything. If you want a background on the entire page then change the css to:
body {
background-image: url("images/bg.png");
}
Otherwise change the css to:
#mydiv {
background-image: url("images/bg.png");
min-height: /* some size here */;
min-width: /* some other size here*/;
}
You also may want to look into background parameters in regards to repeat-x and repeat-y.
You should define width and height of div and also background-size for the image,like(background-size:100% 100%;)
mydiv has no height/width so the background image is too small to see.
Try:
#mydiv {
background-image: url("images/bg.png");
height: 1000px;
width: 1000px;
}
And then adjust to the size you want.
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
I have a webpage, where I am wanting to layer 3 images accordingly to act as a backgound so content can be placed on top. The images shouldn't move when scrolling, so fixed position wouldn't work.
Below is the sequential order they should appear from back to front (1-3)
img - sky.jpg which I set as the background image in the html.
img - backDrop.png which is set above the sky.jpg.
img - BtmRight.png which I want to position above all images and bottom right.
Both images (backDrop.png, BtmRight.png)are set with absolute positioning and z-index to determine order.
I cant get BtmRight.png image to appear bottom right above other images. I want the bottom right image to stay in place when you scroll the page. I would also like the content to appear over all the images.
Below is my HTML/CSS, Is there something I'm missing?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style type="text/css">
html {
height: 100%;
margin: 0;
padding: 0;
margin-top:100px;
background: url(sky.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {
height: 100%;
margin: 0;
padding: 0;
}
#imgBack {
width: 100%;
margin-top:100px;
position:absolute;
z-index:20;
border:#0FF thin solid;
}
#imgBtmRight {
position:absolute;
z-index:50;
bottom:0;
right:0;
}
</style>
<body>
<img id="imgBtmRight" src="BtmRight.png" width="413" height="283" />
<img id="imgBack" src="backDrop.png" />
</body>
</html>
Any light on the subject, or assistance would be greatly appreciated. Thanks
It's probably a good idea to stack your DOM elements in the right order (as well as closing that div):
body
Backdrop
BtmRight
Content
The natural 'stacking' is bottom to top - think of each element (image, div, etc.) as a piece of paper. As you move down the HTML document, you add pieces of paper to the stack. The papers sit on top of each other, unless you change the z-indexing explicitly - but it's best to get them in the right order to begin with, if you can.
Edit:
Seems to be working:
Example using linked images
The only things I changed were the image sources and positioning on the body tag. Unless there's something else you've missed out of the code you should have no problem.
ANOTHER Edit:
If you want the bottom-right image to stay in place, use position: fixed on that image rather than position: absolute.
YET ANOTHER Edit:
If you want the content to go over the top of the bottom-right image, you just need to add a wrapper for your content and use z-indexing:
Example
I'm trying to fix an image to the bottom of the document for a HTML page.
My strategy roughly involves a setting the CSS height of the html node to 100%, and setting the background-position of the background-image to bottom.
This works for pages with a document shorter than the viewport size, but for documents with a length greater than the viewport size, the background is positioned in the middle of the page.
Without knowing whether the document will be longer than the viewport or not, how can I fix the background at the end of the document?
I've managed to get it working as required in Firefox only with the following:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html dir="ltr" lang="en">
<head profile="http://www.w3.org/2005/10/profile">
<style type="text/css">
* {
margin:0;
padding:0;
}
html {
height:100%;
}
.wrapper {
background: #eaeaea url(ufford-logo.jpg) scroll repeat-x bottom center;
min-height: 100%;
}
</style>
</head>
<body>
<div class="wrapper">
<p style="height: 2000px;">test</p>
</div>
</body>
</html>
The inline style on the p tag simulates a long document.
This works for me in Firefox 3.5, IE8/7c, Chrome 2. Doesn't work in Opera 10b but I would expect it to work in the stable version (9.6).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html dir="ltr" lang="en">
<head profile="http://www.w3.org/2005/10/profile">
<style type="text/css">
* {
margin:0;
padding:0;
}
html, body {
height: 100%;
min-height: 100%;
}
.wrapper {
background: #eaeaea url(http://sstatic.net/so/img/so/logo.png) scroll repeat-x bottom center;
min-height: 100%;
}
</style>
</head>
<body>
<div class="wrapper">
<p style="height: 2000px;">test</p>
</div>
</body>
</html>
I think what you're trying to achieve is very similar to this layout, though in your case you would just stick your image into the footer element (or have it as a background on the footer). If you have a more complex page layout you may be able to adapt the code, or you could try this approach using javascript.
If you want to stick something to the bottom of the visible window, you can do so using CSS. This will work on render (and on window resize).
#specialBackground {
background-image: url(bg.png);
background-position: center;
background-repeat: no-repeat;
width: 100%;
height: 100px;
z-index: -1;
position: absolute;
bottom: 0;
}
This will place the image where you want it - you will need to change the background-image and the height appropriate to your image. The z-index places the division behind other content, but it doesn't hurt to define the division earlier in your document too (you can define it anywhere and the position will be unchanged).
To keep the division at the bottom of the viewport when the visitor scrolls the page, you'll need to use JavaScript. Example below:
window.onscroll = function() {
document.getElementById("specialBackground").style.bottom =
(document.body.scrollTop * -1) + "px";
};
Hope this helps.
EDIT: I don't know if I made this clear - but you don't use your "wrapper" division to do this - you add another empty division, which get's placed behind the wrapper because of the CSS rules. So you'd have this on your page:
<div id="specialBackground"> </div>
<div id="wrapper">
...