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;
}
Related
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>
I'm setting a landing page for My new website
I've created an image, and I'm setting it as the background image. Unfortunately, I can't seem to figure out at all how to get it to be full screen, and scrollable - so you can just scroll up/down to see the full image - but without having any white spaces or anything.
<!DOCTYPE html>
<html>
<title>On The Ropes Boxing! Coming Soon!</title>
<body>
<style>
html {
height: 100%;
margin:0px;
background: url(comingsoon.jpg) no-repeat top center;
background-size: cover;
background-attachment: scroll;
}
body {
min-height: 100%;
margin:0px;
}
#appcontainer {
position: relative
background-color: rgba(255, 255, 255, 0.7);
width:560px; height:2220px;
left:20px; top:20px;
}
<img src="comingsoon.jpg" style="minwidth:100%;height:100%;" alt="" />
</style>
</body>
</html>
That is what I have so far. I'm completely new to HTML and CSS, so I'm basically just learning on the job and going through trial and error. I fully expect to be told I'm doing this completely the wrong way. Any advice is appreciated - just be aware that I may need to be told as if I'm an idiot :)
Thanks so much.
Replace the img tag in your code with this:
<img src="http://www.ontheropesboxing.com/comingsoon.jpg" style="width:100%;position:absolute;z-index:-1" alt="" />
And move it out of the style tags.
Before I get into the answer, allow me to correct your code first.
The basic format for a webpage is this:
<!doctype HTML>
<html>
<head>
//Titles, scripts, styles, etc.
</head>
<body>
//Everything else, can also hold scripts and styles.
</body>
</html>
You're missing a head in your code.
Second, don't place html tags inside style tags (referring to your img).
As for your question,
<!DOCTYPE html>
<html>
<head>
<title>On The Ropes Boxing! Coming Soon!</title>
<style>
html, body {
height: 100%;
width: 100%;
margin:0px;
border: 0;
}
.splash {
width: 100%;
z-index: 0;
}
//Rest of styles
</style>
</head>
<body>
<img src="http://www.ontheropesboxing.com/comingsoon.jpg" class="splash" />
</body>
</html>
Putting the image as the background won't work, as the page won't have anything to scroll to. Putting the background as an image will allow the page to scroll.
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>
I realise this question has been asked many times but i am going crazy trying to figure it out.
I am quite new to html and want to built a static header (940px x 30px) containing our logo, navbar, and a few social networking icons.
What i'm struggling to do is make the header fit the entire page, it leaves part of my background on show on the left, top and right sides which is frustrating.
below is the code i have used.
HTML Code
<!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" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<title>TWChome</title>
</head>
<body>
<div id="header">
<div id="headercontents">
Hello
</div>
</div>
</body>
</html>
CSS Code
#charset "utf-8";
/* CSS Document */
body {
background-image:url(../images/bg.jpg);
}
div#header {
display:block;
width:auto;
height:auto;
background-image:url(../images/bar.jpg);
}
div#headercontents {
width:50%;
}
Try this:
body{margin:0;padding:0}
it is actualy not that hard:
#header {
width: 940px;
height: 30px;
margin: 0 auto;
}
First you set the dimensions you say you want it to have, and then you center it. Nothing more to it. Also I have no idea why you are setting the #header-contents to a width of 50%...
update for header with background image:
#header {
height: 30px;
background: url(../images/bar.jpg) no-repeat center center; /* for a single image with height of approx 30px */
background: url(../images/bar.jpg) repeat; /* alternative for a tile you want to repeat */
}
#headercontents {
width: 940px;
margin: 0 auto;
}
and indeed always apply some reset css as stated by others.
I made a web page with the following code and viewed it in Google Chrome.
<html>
<head>
<style type="text/css">
html {padding:30px; background-color:blue;}
body {margin:0px; background-color:red;}
</style>
</head>
<body>
hello world
</body>
</html>
The result is what I expected, a red box with a 30 pixel blue border that fills the entire web browser window. However, when I view it in Firefox, the red box is only the height of one line-height. In IE8, there is no blue border.
How do I make Firefox and IE8 display the same thing as what I see in Google Chrome?
Additional notes I tried adding different doctype tags to the page, but that only made it appear like Firefox, that is, the 1 line-height of red.
For this I think you have to resort to absolute or relative positioning; otherwise, your height/margin combo will push the bottom blue line off the screen. This works cross browser for this simple case. Hopefully it works for your more complicated use case.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body { background:blue; }
.first{
position:absolute; /* fixed also works */
background:red;
top:30px;
left:30px;
right:30px;
bottom:30px;
}
</style>
</head>
<body>
<div class="first">hello world</div>
</body>
</html>
if i understand you correctly, set your html & body width to 100% , height 100%
http://jsfiddle.net/Diezel23/Lv6Vw/#base
You could add an additional div:
<html>
<head>
<style>
body {
padding: 30px;
margin: 0px;
}
div {
width: 100%;
height: 100%;
background-color: blue;
}
</style>
</head>
<body>
<div>
ABC
</div>
</body>
</html>