I'm sure there is a ridiculously simple answer for why this simple example is not showing my the background image but I just don't see it. I'm expecting to see the image twice, once when the image uses the class, and once when it references the image directly.
Thoughts
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style>
.chkCombo {
background: transparent url(http://cache.siliconvalley-codecamp.com/Images/silicon-valley-code-camp.png);
}
</style>
</head>
<body>
<div class="x">
<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="chkCombo">
</div>
<hr />
<div class="x">
<img src="http://cache.siliconvalley-codecamp.com/Images/silicon-valley-code-camp.png" />
</div>
</body>
</html>
By adding height and width to the image and setting it to display: block; the image will appear.
Here is a the fixed fiddle
By the way, I don't see the effect of the base64 image, you use it and also using a class with background image on the same element.
Try using this style
.chkCombo {
height: 56px;
width: 350px;
background: transparent url(http://cache.siliconvalley-codecamp.com/Images/silicon-valley-code-camp.png);
}
A jsFiddle demo
P.S: A background image is litteraly a "background" image so if an element has no dimentions(height and width) then the background image will have no dimentions. Therefore you need to give it a hight and width
Related
I require some help. My friend sent me an HTML document and he asked me to change the background. Now I'm new to HTML and all this but changing the background should be easy but I can't find it anywhere in the HTML doc or the CSS. Any help?
Just create a new css for example for body like this if you want it to be black:
body {
background: #000000;
}
That should work.
div{
background-image: url("https://homepages.cae.wisc.edu/~ece533/images/tulips.png");
height:100px;
}
<div></div>
You can change the background by using background-color or background-image as follows:
<div style="background-color: red" >
This div has a background-color of red
</div>
The HTML file contains 2 main sections - <head>, <body>.
Head specifies attributes like page title, language, links to stylesheets (css / designs).
'Background' can be applied to any part within the <body> section of the HTML file (including body).
Background can be applied in 2 ways -
A colour - Using style="background-color: color-code;"
An image - Using style="background-image: url('img_girl.jpg')"
Here is an example of background being applied:
Approach 1: Background colour:
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body style="background-color: #e6f2ff;">
<div class="my-page">
<h1>-- Heading here --</h2>
<p>-- Description here -- </p>
</div>
</body>
</html>
Approach 2: Background image:
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body style="background-image: url("/paper.gif");">
<div class="my-page">
<h1>-- Heading here --</h2>
<p>-- Description here -- </p>
</div>
</body>
</html>
Note:
The background color / image can be applied to any element inside body, I.E., to div / h1 / p ...
More information:
https://www.w3schools.com/cssref/pr_background-image.asp
https://www.w3schools.com/html/html_images_background.asp
Add a style for header in your CSS file :
.header {
background: "#000000"
}
The background image can be inserted in the page using the below within body tag or by using CSS: < div style="background-image:url('[image url]');>
Also, this website contain good information to go through : https://www.wikihow.com/Set-a-Background-Image-in-HTML
When the webpage become too small some part of it disappear but I would like to make it stay the way it's positioned but resize with the page no matter how small it becomes.
Here's the problem
Here's the code
<!DOCTYPE html>
<html>
<style>
body{
background-color: #1C1C1C;
}
#picture {
text-align: center;
position:fixed;
padding:0;
margin:0;
top:0;
left:0;
width: 100%;
height: 100%;
}
</style>
<title>lllllllllll</title>
<body>
<div id="picture">
<img src="c.png" alt="llllll" width="33%" height="100%" />
<img src="n.png" alt="llllll" width="33%" height="100%" />
<img src="m.png" alt="llllll" width="33%" height="100%" />
</div>
</body>
Welcome to Stack Overflow!
First and foremost, Your basic HTML structure should be as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- CONTENT -->
</body>
</html>
And about Your main problem, try and use CSS to style your layout instead of assigning inline properties like width="33%" and others alike. Right now, your images are stretching because of the inlined properties which are not the same as a style applied to them.
By using these properties on your images, you are telling them to be 33% of their container, but images are not block elments so therefore, they need to be in a container, for example a div.
e.g.
<div class="imageContainer">
<img src="img.jpg" alt=""/>
</div>
I have made a JS Fiddle for you to try it yourself.
When someone here on StackOverflow says "here is a Fiddle" or something similar, what they mean is, they have created a small online coding environment that acts as a sandbox for your project. You have your HTMl, CSS, Javascript and Output, alongside options for adding external content as well. https://jsfiddle.net/
I have changed a few things here and there to show you an example of basic usage. Please feel free to ask what You dont understand.
I have a picture that i've positioned absolutely to use as a background. But it's covering up the content of the page.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
#pic1
{
position:absolute;
top: 0px;
left: 0px;
}
</style>
</head>
<body>
<h1> hi there </h1>
<h1> hi there </h1>
<h1> hi there </h1>
<img id="pic1" src="1.jpg" width="100%" alt="picture">
</body>
</html>
You should change the z-index css property of the image
The z-index property specifies the stack order of an element.
An element with greater stack order is always in front of an element with a lower stack order
how ever you can use another property on you body element to set background :
background-image:url('image url');
Why not use background image placement? This way you have less markup and more control over how you want the background to be displayed. If you still want to place background in this way, then try z-index: -1 and see if that works.
Overall, the way you are creating this page is less than optimal. You are setting image width using attribute. Why not get rid of img tag altogether and just roll with image placement using CSS. Lots of stuff on the web that shows how to do it.
For whatever reason I cannot manually scale the background image of a div no matter what do. background-size and max-height,width have no effect whatsoever. The image is ignoring my style tags. Can somebody please explain why I cannot format the div's background image? I would like to scale the img/Stage-Background.png down from 1600x1076 down to 750x650
<!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>
<link rel="stylesheet" type="text/css" href="SDL.css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Home</title>
</head>
<body>
<img src="img/SDL 4 Final Recompress.jpg" style="margin-left:auto; margin-right:auto; " />
<div style="background-image:url(img/Stage-Background.png); background-size:80px 60px;
background-repeat:no-repeat;">
<center>
<embed
src="http://blip.tv/play/AwGUv2w"
type="application/x-shockwave-flash" width="669"
height="500" allowscriptaccess="always"
allowfullscreen="true" style="margin-top:100px; margin-bottom:200px;">
</embed>
</center>
</div>
</body>
</html>
Based out of my knowledge we cannot scale a background image
If your image dimensions are greater than that of the div then
<div style="width:400px; height:400px;background:url(xyz.png);"></div>
with xyz.png dimensions greater than div's width and height.
You can use:
background-position:center;
Else try using normal img tag then use absolute positioning to place your elements on top of the image.
<div class="your_box_element" style="width:400px;height:400px;position:relative;">
<img width="400px" height="400px" />
<div class="your_text_on_top_of image" style="position:absolute;top:0px; left:0px;">
Your text and other elements go here
</div>
</div>
The method to load the image of greater dimensions and then scaling won't give you good performance hence better to have the image scaled appropriately to the div element incase you want to use it as a background. Seeing your example its better if you make changes to the background image to the required size.
See this for more details on background position background-position to set correct fit
If you want to learn more about background image positions and how they are used commonly on web try reading about Image Sprites
I guess you are dealing with this image: img/Stage-Background.png
Instead of background-size, use height & width parameters in px.
Also, if you can tell us what is the original size of the image, and what size you wish to keep for your DIV.
I am so befuddled. I am trying do something seemingly so simple but failing miserably. I'd like to have the image "b.png" change to "c.png." Can you find where I went wrong?
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="main">
<img src="b.png" />
</div>
</body>
</html>
style.css
.main:hover {
background-image: url('c.png');
}
Your <div class="main"> is getting c.png as its background – you just can't see it behind the <img src="b.png"> element.
Try removing that <img> tag, and using this for your CSS:
.main {
background-image: url(b.png);
}
.main:hover {
background-image: url(c.png);
}
You probably also need to give .main a height and width, since it no longer has anything inside it to give it a size.
Nothing wrong with what you are doing, except that the image(b.png) is of course on top of the background...So you can't see the background image.