Background image not showing up on the website - html

I am trying to place a background image but it does not appear. Please guide.
<header style=" background-image: url("header.png")";
"><p>Test</p>
</header>

It's obviously that you have a typo mistake or missing the image. You can use this code snippet:
Inline CSS:
<header style="width: 360px; height: 150px; background-image: url('http://placehold.it/360x150');">
<p>Test</p>
</header>
External CSS:
header {
width: 360px;
height: 150px;
background: url("http://placehold.it/360x150");
}
<header>
<p>Test</p>
</header>

You have some syntax errors. Also, you must set a height for it.
<header style="background-image: url('http://img.bananity.com/media/512/512/bananities/8060a5cf4f9eae8ecff79720db58c2dfacf707344fcb.png'); background-size: cover; height: 400px; border: 1px solid red;">
<p>Test</p>
</header>

Related

Html page jump from div

Hey guys I am looking for help in regards if i am doing my code right i want to page jump to a section on the same page but every time i click on these links nothing happens.
<div align= "center" id="topdiv">
|HOME|
<b>|PASTA DISHES|</b>
<b>|PIZZA DISHES|</b>
<b>|House Hero Sandwhiches|</b>
</div>
#pasta{
width: 100vw;
height: 600px;
background: pink;
}
#pizza{
width: 100vw;
height: 500px;
background: skyblue;
}
#sandwhiches{
width: 100vw;
height: 700px;
background: lightgray;
}
<div align= "center" id="topdiv">
|HOME|
<b>|PASTA DISHES|</b>
<b>|PIZZA DISHES|</b>
<b>|House Hero Sandwhiches|</b>
</div>
<div id="pasta">
PASTA
</div>
<div id="pizza">
PIZZAA
</div>
<div id="sandwhiches">
SANDWidthweradfsdf
</div>
You can make like this.

How to add 2 Background images with div

I'm trying to create a simple HTML page. Now, I'm trying to add bg-image / color. So I have this simple html tag:
<html>
<style type="text/css">
.header {
height: 100px;
}
.kontent1 {
height: 50px;
margin-top: 10px;
}
.kontent2 {
height: 50px;
margin-top: 10px;
}
</style>
<div class="bgheader"></div>
<div class="header">HEADER</div>
<div class="kontent1"> KONTENT </div>
<div class="bgfooter"></div>
<div class="kontent2"> KONTENT</div>
<div class="footer">FOOTER</div>
</html>
So, what I want to achieve is something like this:
How can this be achieved?
UPDATE
I'm have tried this:
body{
background:
url('<?=base_url();?>/assets/header_bg.png')no-repeat 100px -30px,
url('<?=base_url();?>/assets/footer_bg.png')no-repeat 0px 96%;
background-size: contain;
max-height:80%;
padding-top: 20px;
margin-bottom:10px;
}
but it's not responsive, because when the page height change, the backgrounds are broken.
You can use the below code for adding 2 images in div:
background-image: url(image1.png), url(image2.png);
background-position: center bottom, left top;
background-repeat: no-repeat;
You can go though the below links for better understanding:
http://www.css3.info/preview/multiple-backgrounds/
https://www.w3schools.com/css/css_background.asp
You can use background-color to achieve background color and background-image for image as background on these containers. As you have two different containers, its better approach to background them separately instead of using background on body or parent div.
You can try something like this,
.header-container, .footer-container {
width: 200px;
height: 200px;
border: 2px solid black;
text-align: center;
text-transform: uppercase;
}
.header, .content {
min-height: 100px;
}
.header-container {
background-color: #DD3388;
}
.footer-container {
background-color: #33DD44;
}
<html>
<head>
</head>
<body>
<div class="header-container">
<div class="header"> Header </div>
<div class="content"> Content </div>
</div>
<div class="footer-container">
<div class="content"> Content </div>
<div class="footer"> Footer </div>
</div>
</body>
</html>

Why is background image not showing up for footer?

As seen in the image below, my background image for the footerImage div for my footer are not showing up, even though there is a clearly defined height (50px) and width (100%) for the div as shown by the green border. Why? How do I fix this?
Note: It's NOT an image path issue because I can pull up a preview of the image in Brackets.
My footer:
HTML:
<ul>
<li>
<a href="" target="_blank"> <figure>
<div class = "footerImage resume"> </div>
<figcaption>Resume</figcaption>
</figure></a>
</li>
</ul>
CSS:
.footerImage {
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
width: 100%;
height: 50px;
border: 1px solid green;
}
.footerImage .resume {
background-image: url('../images/resume.png');
}
edit this css for your div
.footerImage.resume {
background-image: url('../images/resume.png');
}
since they are both classes of the same div their should be no gap between .footerImage and .resume
The class that you have applied is written is wrong . You need to use .footerImage.resume instead of .footerImage .resume Please look at the sample code.
<!DOCTYPE html>
<html>
<head>
<style>
.footerImage {
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
width: 100%;
height: 50px;
border: 1px solid green;
}
.footerImage.resume {
background-image: url('http://weknowyourdreams.com/images/bird/bird-06.jpg');
}
</style>
</head>
<body>
<ul>
<li>
<a href="" target="_blank">
<figure>
<div class="footerImage resume"> </div>
<figcaption>Resume</figcaption>
</figure>
</a>
</li>
</ul>
</body>
</html>
Remove the space between .footerImage and .resume
.footerImage.resume {
background-image: url('../images/resume.png');
}
or you can just use
.resume {
background-image: url('../images/resume.png');
}

Trying to repeat a non-background image

Im trying to repeat-y an image, but everything I have tried does not work.
HTML Body Code:
<body>
<h1>Native Flowers</h1>
<div id="header"></div>
<div id="navBar">
<ul>
<li>Home</li>
<li>Other</li>
<li>Other</li>
<li>Other</li>
<li>Other</li>
</ul>
</div>
<img class="pinkTex" src="res/pinkTex.jpg"/>
</body>
This is the code for the body of my HTML file currently.
CSS pinkTex:
.pinkTex {
left: 0px;
height: 100%;
width: 200px;
}
At the moment this is the code for the pinkTex class for the img.
So if I can please get some help on how to repeat this y-axis, that would be great. Thanks You.
if you give image in body tag use this code and please make sure your image path is proper.
body
{
background-image: url("res/pinkTex.jpg");
background-repeat: repeat-y;
}
you can use also
.pinkTex
{
left: 0px;
height: 100%;
width: 200px;
background-image: url("res/pinkTex.jpg");
background-repeat: repeat-y;
}

Adding a background image to a <div> element

Is it possible to make a <div> element contain a background image, and if so, how would I go about doing this?
You mean this?
<style type="text/css">
.bgimg {
background-image: url('../images/divbg.png');
}
</style>
...
<div class="bgimg">
div with background
</div>
You can do that using CSS's background propieties. There are few ways to do it:
By ID
HTML:
<div id="div-with-bg"></div>
CSS:
#div-with-bg
{
background: color url('path') others;
}
By Class
HTML:
<div class="div-with-bg"></div>
CSS:
.div-with-bg
{
background: color url('path') others;
}
In HTML (which is evil)
HTML:
<div style="background: color url('path')"></div>
Where:
color is color in hex or one from X11 Colors
path is path to the image
others like position, attachament
background CSS Property is a connection of all background-xxx propieties in that syntax:
background:
background-color
background-image
background-repeat
background-attachment
background-position;
Source: w3schools
Yes:
<div style="background-image: url(../images/image.gif); height: 400px; width: 400px;">Text here</div>
Use this style to get a centered background image without repeat.
.bgImgCenter{
background-image: url('imagePath');
background-repeat: no-repeat;
background-position: center;
position: relative;
}
In HTML, set this style for your div:
<div class="bgImgCenter"></div>
Use like ..
<div style="background-image: url(../images/test-background.gif); height: 200px; width: 400px; border: 1px solid black;">Example of a DIV element with a background image:</div>
<div style="background-image: url(../images/test-background.gif); height: 200px; width: 400px; border: 1px solid black;"> </div>
You can simply add an img src Attribute with id:
<body>
<img id="backgroundimage" src="bgimage.jpg" border="0" alt="">
</body>
and in your CSS file (stretch background):
#backgroundimage
{
height: auto;
left: 0;
margin: 0;
min-height: 100%;
min-width: 674px;
padding: 0;
position: fixed;
top: 0;
width: 100%;
z-index: -1;
}
<div class="foo">Foo Bar</div>
and in your CSS file:
.foo {
background-image: url("images/foo.png");
}
<div id="image">Example to have Background Image</div>
We need to Add the below content in Style tag:
.image {
background-image: url('C:\Users\ajai\Desktop\10.jpg');
}
For the most part, the method is the same as setting the whole body
.divi{
background-image: url('path');
}
</style>
<div class="divi"></div>