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.
Related
I have this HTML file whןch suppose to duplicate
an image and put it right next to the original.
so you get the same image twice, sort of connected
it does'nt work for some reason:
duplicate
<html>
<body>
<img src="https://images.unsplash.com/photo-1648852071390-7a17e3f2580a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80"><img src="https://images.unsplash.com/photo-1648852071390-7a17e3f2580a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80">
</body>
</html>
thank you
I was expecting an image to duplicate
but it does not work
It does work. As Victor Svensson mentioned the comments, one way you could fix this is by setting a max width for the images.
img {
max-width: 50%;
}
<html>
<body>
<img src="https://images.unsplash.com/photo-1648852071390-7a17e3f2580a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80"><img src="https://images.unsplash.com/photo-1648852071390-7a17e3f2580a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80">
</body>
</html>
My answer can be a bit unrelated to your case, but still, it works as you described.
Add a CSS rule float: left which puts all the elements just right next to each other. The image you're using is too big, so you might consider specifying the width of the photo by adding one more rule called width: and the value you need.
You can add those rules in three ways: by adding them in the style attribute
<img style="float: left; width: 480px;" src="...">
or by creating a <style> tag in your HTML code
<html>
<head>
<style>
.my-imgs {
float: left;
width: 480px;
}
</style>
</head>
<body>
<img class="my-imgs" src="...">
</body>
</html>
or by creating a CSS-file, linking it to your HTML
Your HTML file:
<html>
<head>
<link rel="stylesheet" href="styles.css"/>
</head>
<body>
<img class="my-imgs" src="...">
</body>
</html>
Your CSS file (styles.css in this case, placed in the same folder as your html file)
.my-imgs {
float: left;
width: 480px;
}
i was going through this tutorial, to allign two images inside a dive vertically so that there is no space between them, please take a look
http://mynag.kopiblog.com/2012/11/28/solved-remove-space-below-an-image-in-div-when-vertically-align/
i wrote my code like this
<head>
<style type=”text/css”>
.imgclass
{
background-color:#1122CC;
text-align:center;
}
img
{
display:block;
}
</style>
</head>
<body>
<div class=”imgclass”>
<img src=”pictop.jpg”>
</div>
<div>
<img src=”picbottom.jpg”>
</div>
</body>
</html>
but it didnt workrd as shown in the second pic shown in the link i specified.
What am i doing wrong here.
i want them as two pics alined vertically without any space.
please help
Please replace your quotes with the right ones, “ is not ".
The code is missing doctype and opening html-tag.
Try this:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.imgclass
{
background-color:#1122CC;
text-align:center;
}
img
{
display:block;
}
</style>
</head>
<body>
<div class="imgclass">
<img src="http://image.tutorvista.com/cms/images/38/square1.jpg">
</div>
<div>
<img src="http://image.tutorvista.com/cms/images/38/square1.jpg">
</div>
</body>
</html>
Your result should look like this:
http://pbrd.co/1qt52ku
Tested in Chrome. Other browser may need fixes via line-height, margin, and padding.
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
I am new to programming and have a basic question. I have a background image on my web page, but I want the content area to have a white background. I see this very commonly on the web but being new I cannot seem to figure out how to do it. I have a #wrapper div that centers my content and a css rule to show the image, just can't get the content area background to be white. Help for this newbie is appreciated!
There are several ways to achieve this. You can either set the styles of your HTML tags (div, span, p etc...) by using the style attribute as in the example:
<div style="background-color: white;"></div>
or either define your styles inside the <head></head> tag as follows:
<html>
<head>
<style>
.your_class { background-color: #ffffff; }
</style>
</head>
<body>
<div class="your_class"></div>
</body>
</html>
or either use the link tag to put your CSS code inside a file and link to it as:
<head>
<link rel="stylesheet" type="text/css" href="your_file.css">
</head>
Or sometimes you will need to set your style dynamically. Then javascript enters into the picture:
<html>
<head>
<script>
function changeBg(id, color) {
document.getElementById(id).style.bgColor = color;
}
</script>
</head>
<body onload="changeBg('myDiv', 'white');">
<div id="myDiv"></div>
</body>
</html>
You should read more on HTML and CSS to understand how it works. There are plenty of tutorials on the web.
Assuming a structure like this :
<body>
<div id="wrapper">
<section id="content"> <!-- Or div or whatever -->
Lorem ipsum dolor sit amet
</section>
</div>
</body>
You should apply a background-color to #wrapper :
body{
background-image: url("your_url");
}
#wrapper{
background-color:white;
}
Check this fiddle for a working example.
Put your content inside a div and specify background:#fff; for that div in your CSS.
I have created a small PSD Mockup of a about page for my website. However I have no idea how to code HTML and CSS.
I currently have the following code:
index.html
<html>
<link rel=StyleSheet href="css.css"
type="text/css">
<head><title>title</title></head>
<body>
<div id=body>
</div>
<div id=header>
<h3><font title=Futura>Header</font></h3>
</div>
</body>
css.css
body {
background-image: url("background.png");
background-position: 50% 50%;
background-repeat: no-repeat;
}
header {
background-image: url("otherBackground.png");
background-position: 50% 50%;
background-repeat: no-repeat;
}
I would like to have the background image of body to have the background image of header on top of it and then some text ontop of that.
How could I achieve this?
In this case, you'll want to utilize nesting and begin to understand general document flow. You are able and encouraged to place HTML elements inside of other HTML elements to establish a parent::child flow and control the position of the elements on your page. Notice how I moved the header element inside of the body div
<html>
<link rel="StyleSheet" href="css.css"
type="text/css">
<head><title>title</title></head>
<body>
<div id="body">
<div id="header">
<h3><font title="Futura">Header</font></h3>
</div>
</div>
</body>
You also need to make sure you surround your element attributes with quotation marks. In your css, if you are targeting a div, you need to specify that by prefixing a # to the element name.
Not a bad start, but keep reading tutorials - you'll get the hang of it!
You need to add the # before "header"
#header { }