This question already has answers here:
Background-image in <div> doesn't display
(2 answers)
Background color not showing for a DIV
(4 answers)
Why background color is not applying to DIV container? [duplicate]
(4 answers)
Closed 1 year ago.
I'm having problems with coding this, because I really can't find what the problem is, the background color wouldn't appear.
I used an external css file.
I hope someone answers this, the code is below:
This is the html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="designs.css">
</head>
<body>
<div class="header">
</div>
</body>
</html>
This is the css:
.header {
background-color: #111111;
}
Your code is ok. The problem is that you did not specify width and height of the div.
Try to add this to your css and you will see that it will work.
.header {
background-color:#111111;
width: 100%;
height: 100px;
}
I actually had this problem (before I knew about StackOverflow).
Your code is (mostly) fine.
The problem is the computer doesn't know what to do.
A div is simply a divider. (Pretty sure that div is a abbreviated version of divider).
A divider without anything inside it is empty. Useless.
You need to put something in it to apply color, size, ect.
See the following Stack Snippets®.
As you can see, adding text is a simple way to solve your problem.
.header {
background-color: #111111;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="designs.css">
</head>
<body>
<div class="header">
And look at that. Problem solved.
</div>
</body>
</html>
If you don't want text, add a <br>.
.header {
background-color: #111111;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="designs.css">
</head>
<body>
<div class="header">
<br>
</div>
</body>
</html>
You can even set the size of the div, too!
.header {
height: 200px;
width: 50 px;
background-color: #111111;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="designs.css">
</head>
<body>
<div class="header">
Some text here whose div has been set to 200 by 50 px
</div>
</body>
</html>
Related
I'm trying to add color in the body property of my CSS in Codepen. Have not added anything but the title to the webpage, but it does not changes color regardless of where I put the tag. Tried to place the <body> html tag before <head>, erased <main>, still no change.
<!DOCTYPE html>
<html>
<head>
<title>Project Survey Form</title>
</head>
<body id="body">
<main>
<h1 id="title">Survey Form</h1>
</main>
</body>
</html>
<style>
body {
background-color: blue;
}
</style>
It keeps displaying the white background. Do you know of any workaround for this?
Codepen at CSS section, you don't need style tag
<style>
body {
background-color: blue;
}
</style>
to
body {
background-color: blue;
}
I have seemed to encounter an unknown space below the div pair.
I have used the bootstrap grid concept and made use of rows and columns to have 2 adjacent Divs.
Then I have used CSS to make the div fill the whole space of the screen but I seem to get unaccounted for white space below the divs.
I have already tried including an advanced CSS reset.
Here is the html :
#half_box_1 {
width: 50%;
height: 100vh;
background-color: #FFAEAB;
}
#half_box_2 {
width: 50%;
height: 100vh;
background-color: #FFC0FA;
}
#following_div {
height: 500px;
width: 100%;
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
<title>Kshitij Dhyani</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="materialize.css">
<link rel="stylesheet" type="text/css" href="my_portfolio.css">
<!-- FONTS -->
</head>
<body>
<div class="row">
<div class="col-lg-6" id="half_box_1">asd</div>
<div class="col-lg-6"
id="half_box_2"></div>
</div>
<div id="following_div"></div>
</body>
</html>
I am unable to comprehend this unaccounted space.
Since you probably have noticed (by the comments), your code seems to work fine.
Your problem seems to be somewhere else in your CSS.
First, try to use the following CSS to see if it works:
* {
padding: 0 !important;
margin: 0 !important;
}
If that worked, you can delete it and you need to start debugging.
Open up Chrome DevTools and go to Sources -> Page and find your CSS file(s). Try to delete each CSS block one after the other. If there is no more space between, you may found out where the problem is.
this is default margin, Please add this code body{margin: 0;padding: 0;} in css
I've tried displaying an image like this in every possible way I can think of:
1. links to a website like it is now
2. having the image be local: bird.png
3. i always double check the name of the image is right and the extension
4. ../images/bird.png
etc.
Any help is appreciated
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title> Internal Affairs Inc. | When Information Really Matters </title>
<style>
#logo
{
background-image:url('http://www.birds.com/wp-content/uploads/home/bird4.jpg');
}
</style>
</head>
<h1>ho</h1>
<body>
<div id="logo"></div>
</body>
</html>
The div doesn't have any dimensions. 0 height. Add some height of 302px as the image is 302px high:
#logo {
background-image:url('http://www.birds.com/wp-content/uploads/home/bird4.jpg');
height: 302px;
}
<div id="logo"></div>
Your div has no dimensions, so is 0x0 and a bg image is not visible. Try:
#logo
{
background-image:url('http://www.birds.com/wp-content/uploads/home/bird4.jpg');
width: 592px;
height: 302px;
}
I have looked at lots of different answers to similar questions and cant seem to find the answer anywhere. The question is simple, why are my #body styles not being applied. Basically I just want a background color to be applied. Interestingly, none of the styles are actually being passed to from the CSS to the body. The code is simple but not working.
When i use "inspect element" i can see that all my other styles are working fin but nothing is being passed to the body element and I cant figure it out!
I'm sure its something really simple but would appreciate your help on this one. The code is as follows:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header">
<div id="contact_bar">
CSS is:
#body{
background-color:red;
}
#header{
background-color: #3862C6;
height:500px;
}
#contact_bar{
background-color: #020731;
height:150px;
}
It's not #body{... , but body{... (without the "#")
What an idiot.... as soon as I poseted i notice the "#" infront of body....
You should know that in CSS # is used to style id elements, but body is HTML tag and it should be styled as per the CSS given in this answer.
Your HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header">
<div id="contact_bar">
CSS should be:
body{
background-color:red;
}
#header{
background-color: #3862C6;
height:500px;
}
#contact_bar{
background-color: #020731;
height:150px;
}
I have an img inside the a tag. When hovering on a, I want to change the image url. Is it possible with CSS?
<img src="img/takipet.png" alt="">
To directly answer your question, here’s one CSS-only approach:
HTML:
<div id="the-image-wrapper">
<img id="image-main" src="some/src">
<img id="image-alternate" src="some/other/src">
</div>
CSS:
#image-alternate {display: none;}
#the-image-wrapper:hover #image-main {display: none;}
#the-image-wrapper:hover #image-alternate {display: inline;}
You’re probably better off trying an alternate approach however, such as using a background image instead. Of course, it really depends on the application.
If you’re going the background-image route, you should take a look at using sprites.
You have few ways to do this.
If you prefer to use css you should replace with background-image property
a.some_class{
background-image:url(your_image_url);
background-repeat: no-repeat;
display: block;
height:image_height;
width:image_width;
}
a.some_class:hover{
background-image:url(your_image_url2);
}
Also you can use two images wrapped with Div. And show/hide needed on div hover.
With jQuery
$('a img.your_img_class').mouseover(function () {
$(this).attr("src", "hover_1_src");
})
.mouseout(function () {
$(this).attr("src", "old_src");
});
If it's a background image, you can do this:
.element:hover{
background-image:url(bg.jpg);
}
or even
.element:hover a{
background-image:url(bg.jpg);
}
If the a tag is within something else.
Change src="" attribute is can't change by Using CSS . Just Change with Javascript Or Jquery.
you can Just Control Styles By css .
Create Div Element And set background-image for it.
HTML Css:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#MyDiv{
width:100%;
height:100%;
background-image: url('Image.jpg');
}
#MyDiv:hover{
background-image: url('NewImage.jpg');
}
</style>
</head>
<body>
<div id="MyDiv" > </div>
</body>
</html>
Html Javascript:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<img src="http://codeorigin.jquery.com/jquery-wp-content/themes/jquery/images/logo-jquery.png" onmouseover="this.src='http://www.google.com/images/srpr/logo11w.png';" >
</body>
</html>