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;
}
Related
I'm very, very new to HTML and CSS, so sorry for my ignorance! I'm trying to add an image to my header, to go to the left and above the navigation. Any help anyone can give would be amazing!!
I have tried two ways of adding the image, the first using , but it did not show (I could see the image 'content' highlighted in blue on the page when i was in the console, but i couldn't see the image. The second way I used a , then the css below:
body {
background-color:#4A4849;
margin: 0 auto;
font-family:Arial, helvetica, sans-serif;
}
.Logo {
display: inline;
float:left;
width: 100%;
height: 100%;
background-image: url('../Images/Logo.png');
}
header {
text-align: center;
width: 100%;
height: 15%;
background-color: white;
margin: 0;
}
My full CSS includes the below...i feel like the problem is to do with the , as in the console the dimensions show as 1304x0 (but I am able to see the navigation) I therefore tried adjusting the header, which is why it duplicates with the .topnav.(see below) :)
.topnav {
font-weight: bold;
background-color: white;
overflow: hidden;
position: fixed;
top: 0;
left 0;
width:100%;
height:15%;
}
.topnav ul {
list-style-type:none;
overflow: hidden;
margin:0;
padding: 0;
}
.topnav li {
display:inline;
padding: 0px;
margin: 0px;
}
.topnav a {
float: right;
color: #4A4849;
text-align: center;
padding: 20px 10px;
text-decoration:none;
width:10%;
}
It would be great if anyone could help, as I've tried different things based on resources i've found online!
*HTML, in case you need it:
<body>
<header>
<div class="Logo"></div>
<nav>
<div class="topnav">
<ul>
<li>CONTACT US</li>
<li>ABOUT US</li>
<li>GRAPHIC DESIGN</li>
<li>MARKET</li>
<li>HOME</li>
</ul>
</div>
</nav>
</header>
There are a few things that can be changed with how you are setting things up:
I would recommend not making your logo the background-image on a div, when an <img> tag will work better in your case (<img src="path/to/your/logo.png">).
If you do use it as a background-image on a div, you have to remember that background images do not affect the height of an element.
Setting a % height on the .Logo div will also not work, since a percentage height needs to be relative to a containing element and you also set it to an inline element (height will not apply). Since, its parent (header) has as height of 15%, but that element also has no reference to 15% - e.g. 15% of what? The body tag would need to have a height set to 100%.
Only for your logo, I would simply do this:
<header>
<img src="your logo link">
<nav>
<div class="topnav">
<ul>
<li>CONTACT US</li>
<li>ABOUT US</li>
<li>GRAPHIC DESIGN</li>
<li>MARKET</li>
<li>HOME</li>
</ul>
</div>
</nav>
</header>
If you absolutely want to make it a background-image:
.Logo {
height: whatever your logo height is;
display: block;
background-image: url( ../Images/logo.png );
background-repeat: no-repeat;
}
<header>
<div class="Logo"></div>
<nav>
<div class="topnav">
<ul>
<li>CONTACT US</li>
<li>ABOUT US</li>
<li>GRAPHIC DESIGN</li>
<li>MARKET</li>
<li>HOME</li>
</ul>
</div>
</nav>
</header>
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/
Kinda new to HTML, want to edit my navigation bar so that it has an image behind it and the nav bar sits at the bottom of the image. How do I do this?
After looking at a few forum posts, this is what I tried:
#cover {
background-image: url("Images\FB Cover.png");
}
<div id="cover">
<div>
<nav>
<li>Home</li>
<li>About DRC</li>
<li>Our Products</li>
<li>Contact</li>
</nav>
</div>
</div>
#cover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(http://lorempixel.com/800/600) no-repeat 50% 50% / cover;
}
menu {
position: absolute;
left: 20px;
bottom: 20px;
}
a {
color: #fff;
}
<div id="cover">
<menu>
<li>Home</li>
<li>About DRC</li>
<li>Our Products</li>
<li>Contact</li>
</menu>
<div>
simple example
to place image as background of DOM element you can use, background-image css property.
For example
background-image: url('https://static.pexels.com/photos/87646/horsehead-nebula-dark-nebula-constellation-orion-87646.jpeg');
W3School has great documentation about css properties.
here is the link
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');
}
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>