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');
}
Related
<div id="Image">
<!-- <img src="https://images.unsplash.com/photo-1671742225244-ee282feb769d?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzQ2ODc3NDY&ixlib=rb-4.0.3&q=80" alt="Diagonal Stripes"> -->
</div>
#Image {
background-image: url("https://images.unsplash.com/photo-1671742225244-ee282feb769d?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzQ2ODc3NDY&ixlib=rb-4.0.3&q=80");
background-repeat: repeat;
}
I've made this code and/but I don't see any image. Why is that?
add dimensions / content to the div. it has no size so the image can't be seen. ( eg. width: 200px; height: 800px)
You may also want to have a look at background-size, here.
#Image {
background-image: url("https://images.unsplash.com/photo-1671742225244-ee282feb769d?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzQ2ODc3NDY&ixlib=rb-4.0.3&q=80");
background-size: contain;
width: 800px;
height: 200px;
background-repeat: repeat;
background-color: gray;
}
<div id="Image">
<!-- <img src="https://images.unsplash.com/photo-1671742225244-ee282feb769d?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzQ2ODc3NDY&ixlib=rb-4.0.3&q=80" alt="Diagonal Stripes"> -->
</div>
Here is two solutions:
#Image {
background-image: url("https://images.unsplash.com/photo-1671742225244-ee282feb769d?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzQ2ODc3NDY&ixlib=rb-4.0.3&q=80");
background-repeat: repeat;
width:100;
height:100;
background-size: contain;
}
img {
width:100;
height:100;
}
<div id="Image">
First solution - This is not a good solution because the img could not be zoomed even using scale:0.11;
</div>
<img src="https://images.unsplash.com/photo-1671742225244-ee282feb769d?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzQ2ODc3NDY&ixlib=rb-4.0.3&q=80" alt="Diagonal Stripes">
<!--Second solution:Using img and this is good-->
I'm having an issue getting the hover to work on my project. I used this code in a different project and worked fine (although I did not use the background image in that project). Ive tried modifying the hover to access ID and Class on separate blocks, no luck. Thanks for taking a look!
Here's my HTML:
<div class="divTableRow">
<a href="#">
<div class="divTableCell in-news">
<h3>In the News</h3>
<div class="hvr">
<p>Read about the buzz viveve is creating</p>
</div>
</div>
</a>
<a href="#">
<div class="divTableCell" id="investor">
<h3>Investor News</h3><div class="hvr">
<p>Read about Viveve's financials</p>
</div>
</div>
</a>
</div>
Here's my CSS:
.in-news {
background-color: #C4D600;
}
.in-news:hover {
background-color: none;
background-image: url(Images\InTheNews.png);
background-size: 50%;
background-repeat: no-repeat;
background-position: top 20px center;
}
#investor {
background-color: #8999BA;
}
#investor:hover {
background-color: none;
background-image: url(images\InvestorNews.png);
background-size: 50%;
background-repeat: no-repeat;
background-position: top 20px center;
}
.divTableCell {
display: table-cell;
width: 280px;
height: 280px;
float: left;
position: relative;
margin: 3px;
}
.hvr {
display: none;
}
.hvr:hover {
display:inline;
}
Thanks again.
Looks like you are missing quotes around the images URL. So it should be:
background-image: url("images\InvestorNews.png");
instead of:
background-image: url(images\InvestorNews.png);
Here's a working example: https://codepen.io/wedgess/pen/YOpBoq
I'm trying to add content on an image however I'm not sure where to place the code. When I place it above everything, it takes priority and none of my code shows. However when I place the image in the body CSS, it displays but I have problems trying to place my next line of code at the end of the image and not on the image below my last line of code which in this case is the Shop Now. I'm pretty sure I have placed the IMG code somewhere wrong. I appreciate anyone's help.
HTML:
<body>
<div class="Image">
<img src="C:\Users\Gabriel\Downloads\Green-blur.jpg"/>
<ul id="nav">
<li id="brand">MINIMAL</li>
<li id="navm">Men</li>
<li id="navm">Women</li>
<li id="navm">Contact</li>
</ul>
<h1>Simplicity is Minimal</h1>
<div id="home">
Shop Now
</div>
</div>
</body>
CSS:
<!--Content from code shows-->
body {
background-image: url();
background-size: 100% 130%;
background-repeat: no-repeat;
font-family: "PT Sans", sans-serif;
}
<!--IMAGE TAKES PRIORITY-->
img {
height: 1000px;
background-repeat: no-repeat;
}
Something like this?
body {
font-family: "PT Sans", sans-serif;
}
.image {
background: url("https://www.blogcdn.com/www.joystiq.com/media/2011/06/respawngameblurryimage530pxheaderimg.jpg");
background-size: cover;
}
li {
display: inline-block;
padding-right: 10px;
}
li a{
color: white;
}
<div class="image">
<ul id="nav">
<li id="brand">MINIMAL</li>
<li id="navm">Men</li>
<li id="navm">Women</li>
<li id="navm">Contact</li>
</ul>
<h1>Simplicity is Minimal</h1>
<div id="home">
Shop Now
</div>
</div>
Note: Removed the image in your HTML and added it to your CSS.
Hope it helped
What I understand from your question is that you want to put content over the image.
You can achieve this by using background image as you have done but for background image you have to provide the correct path of the image.
In your code
background-image: url('path of your image'):
background-size: contain;
Remove image tag from html.
From the looks of it, I think you're wanting that image to be the background on body, so you can move the src of your img into the background-url() property on body. And if you want the background to span the entire height of the browser window, add min-height: 100vh; to body.
body {
background-image: url(http://3.bp.blogspot.com/_EqZzf-l7OCg/TNmdtcyGBZI/AAAAAAAAAD8/KD5Y23c24go/s1600/homer-simpson-1280x1024.jpg); /* put your "C:\Users\Gabriel\Downloads\Green-blur.jpg" image here */
background-size: 100% 130%;
background-repeat: no-repeat;
font-family: "PT Sans", sans-serif;
min-height: 100vh;
}
<body>
<ul id="nav">
<li id="brand">MINIMAL</li>
<li id="navm">Men</li>
<li id="navm">Women</li>
<li id="navm">Contact</li>
</ul>
<h1>Simplicity is Minimal</h1>
<div id="home">
Shop Now
</div>
</body>
There are two ways to think about images and content on top of them. One would be to add a background-image to the element the content resides in. In other cases you'll want to use the image to maintain ratio and then position the content 'on top' with absolute positioning.
markup
<header>
<div class="stuff">Stuff here... example with background image</div>
</header>
<!-- OR -->
<div class="thing">
<img src="https://placehold.it/1600x900" alt="">
<div class="text">
Stuff here... example with absolute and relative positioning
</div>
</div>
styles
header { /* background image example */
background-color: lightblue;
padding: 10px;
background-image: url(https://placehold.it/1600x900);
}
.thing img {
display: block; /* so the image responds to it's parent */
width: 100%; /* */
height: auto; /* */
}
.thing { /* absolute position example */
position: relative; /* so it is the new boundery for children that are absolute */
max-width: 600px;
}
.thing .text {
position: absolute; /* this will take it out of the flow but let you position it based on parent */
top: 0;
left: 0;
padding: 1rem;
}
example: https://jsfiddle.net/sheriffderek/fvvq4cwq/
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;
}
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>