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.
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 want to make the form looks 1200px in width. However, when I set width in class .container or .form-group, or even in form tag, it won't work. Only when I set width in textarea tag will it work. What is the problem?
index.html
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="container">
<form>
<div class="form-group">
<textarea class="status-box"></textarea>
</div>
</form>
</div>
</body>
</html>
style.css
.container {
width: 1200px;
margin-top: 20px;
}
Your container size is fine - but if you want your elements to fill the container, you'll need to set the width of them seperately.
E.g.
.container { width: 1200px; }
textarea, input { width: 100%; }
If you want the textarea fill the 1200px, just add this line in your CSS code :
textarea {width: 100%;}
See it here
Also provide some height in CSS Class
.container {
width: 1200px;
margin-top: 20px;
min-height:10px // or Height:whatever the height you prefers
}
Just to make sure that the CSS knows where it's being applied, you should try this in your style file:
.container .form-group {
width: 1200px;
margin-top: 20px;
}
Or if you're tying to size your text area you need to use it's rows and cols attributes: http://www.w3schools.com/tags/tag_textarea.asp
Please add "background-color: gray" to your container class. You will see the div width works. The width is for div, while it's not for the content in the div. So the right way is add width to textarea.
There isn't a problem. As you can see the width is already active tho it doesn't show since there is no identification. snippet here.
If you change your css to look like the following you can see it for yourself.
.container {
width: 1200px;
margin-top: 20px;
background-color:blue; <-- This will show the full width of your div in a color
}
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'm trying to make a list of slide divs that will have content within them, something quite similar to what the Foo Fighter's have going on, on their website: http://www.foofighters.com/us/discography
The main thing I'd like to figure out is how to have each "slide" auto-adjust to be the proper height when the browser is resized. You can check it out yourself on the discography page I linked. Is there a way to accomplish this? I'm assuming it would be a javascript/jquery thing.
It's important to know that to have a 100% height on a block element, all of the parents must also be set to 100% height.
For example, my if html looks like this:
<!DOCTYPE html>
<html>
<body>
<div id="wrapper">
<div id="myDiv">This is my div!</div>
</div>
</body>
</html>
The CSS required to make myDiv 100% height would be
<style type="text/css">
html, body, #wrapper, #myDiv { height: 100%; }
</style>
Notice all of the parents of #myDiv are also set to 100% height. This is the key to achieving 100% dynamic height for block elements.
An example of getting a div to resize to browser window height:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body {
height: 100%;
background-color: black;
margin: 0;
padding: 0;
}
#mydiv {
height: 100%;
width: 400px;
background-color: white;
margin: auto;
text-align: center;
}
</style>
</head>
<body>
<div id="mydiv">TEST</div>
</body>
</html>
Tested in Chrome, IE9, Firefox and Opera, all running on Windows. IE9 required the DOCTYPE to be specified in order to work correctly, the other browsers didn't seem to care.
JQuery alternative: Set DIV height dynamically based on viewport height
html:
<html>
<head>
<title>Home</title>
<link rel="stylesheet" type="text/css" href="qa.css" />
</head>
<body>
<div id="wrap"></div>
</body>
</html>
css:
body {
margin:0;
padding:0;
}
#wrap {
width:750px;
margin-right:auto;
margin-left:auto;
background:#008B00;
}
The html file is called qa.html, and the css file is called qa.css
The two files are in the same directory.
Um... How's the HTML supposed to show anything if there's no content?
[EDIT] To make it more specific and not sound like I'm complaining: put some content in the wrapper div, otherwise it's empty and thus with 0 height.
[EDIT 2]: According to the expected output you describe in the comment, you want the div to take up 100% height of the document. You need to specify this explicitly, ie body and #wrap need to have height:100%. Or even better, min-height.
The div will collapse upon itself if there is no content and no height set. Either put some text or content into the div, or set a min-height or height explicitly.
Edit: please put a doctype in your pages; it helps a lot with expected renderings.
a green div block that fills the middle 750 pixels of the page.
So,
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#wrap {
width: 750px;
height: 100%;
margin: 0 auto;
background: #008B00;
}
?