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/
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>
Trying to put together a hero image but it seems like when I use background-size:contain my image repeats itself like in the below screenshot:
Problem is, if I use background-repeat:no-repeat it does this
ALL Im trying to do is have a 75vh hero image with that image showing full. Not sure what I am doing wrong but it's been a long time since I touched CSS.
HTML
<div class='header'>
<div class='header__navbar'>
<div class=header__navbar-media>
<!-- used for first block to center logo -->
</div>
<div class='header__navbar-logo'>
<img src="../img/logo-lospallos22.png" class='header__navbar-logo-img'>
</div>
<div class='header__navbar-order'>
<div class='header__navbar-order-account'>
<a href="#" class='login-nav'>Login</a>
<a href="#" class='login-nav'>|</a>
<a href="#" class='login-nav'>Register</a>
</div>
<a href='#' class='btn btn__orderButton'> Order Now</a>
</div>
</div>
CSS
.header {
background-image: url(../img/bg.jpg);
height: 75vh;
padding-top: 2rem;
max-width: 100%;
background-size: contain;
background-repeat: no-repeat;
}
*, *::after, *::before{
box-sizing: inherit;
padding: 0;
margin: 0;
}
html{ /*Root font size is set in the html selector*/
font-size: 62.5%; /* This is the font size we want(10px) divided by default root font size. 10/16 = .625*/
/*The reason we use percentage instead of hardcoded pixels is because it allows end users to change font size for vision purposes in their browser..*/
}
a:link, a:visited{
text-decoration: none;
}
a{
color: inherit;
}
All the items within header are flex items so i left out that CSS because I dont believe it will add any value.
If you want the image to cover the whole area use background-size: cover instead of contain.
I'm having an issue where some images are not covering the entire width of the browser and some images are just too large to the point where you have to scroll right to see the entire image. I am using background-size:cover and I tried background-size: auto 100%; because that fixed it for some people. I want the background below my navbar to be an image, can someone help me understand why I am unable to achieve this?
<nav>
<ul class="navbar-list">
<li class="navbar-items">Home</li>
<li class="navbar-items">About</li>
<li class="navbar-items">Basics</li>
<li class="navbar-items">Contact</li>
</ul>
</nav>
<div class="body-img">
<img
src= "https://images.unsplash.com/photo-1508138221679-760a23a2285b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80"
alt="sorry it looks like something went wrong."
/>
</div>
for my css I use : body-img img { background-size: cover; }
Set the width of body-img to width:100vw
You can also remove the padding and margin in the page using:
* {
padding: 0;
margin: 0;
}
Try it by using Flex.
.d-flex {
display: flex;
flex-flow: column;
height: 100vh;
}
.body-img {
flex: 1;
height: 100%;
}
.body-img img {
height: 100%;
width: 100%;
}
Html codes are like that.
<div class="d-flex">
<nav>
<ul class="navbar-list">
<li class="navbar-items">Home</li>
<li class="navbar-items">About</li>
<li class="navbar-items">Basics</li>
<li class="navbar-items">Contact</li>
</ul>
</nav>
<div class="body-img">
<img
src= "https://images.unsplash.com/photo-1508138221679-760a23a2285b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80"
alt="sorry it looks like something went wrong."
/>
</div>
</div>
If you don't want the image stretching, remove width property.
Many problems with this.
.body-image img{
background-size:cover;
}
The img tag is not considered a container. Therefore background-size:cover; is not a appropriate style property for it.
If you intended to use a image as a background for a container; in this scenario a div element. You would call the image url through CSS vs using a img tag.
.body-image{
background-image: url('');
background-size: cover;
}
But wait this is still incomplete in order to scale the whole window size. Containers with no set width inherit the property width:auto;, so we will need to set the width of the container.
.body-image{
background-image: url('');
background-size: cover;
width:100%;
display:flex;
}
If you still insisted to keep a img tag. You would only need to set the width of both the container and the img tag.
so this code will also work for your desired effect.
.body-image{
display:flex;
width:100%;
}
.body-image img{
width:100%;
}
Following this question who is exactly the same as mine I tried to make my menu_gauche taking all the height.
So when I look into the CSS with the navigator:
body {
color: #73879C;
background: white;
font-family: "Helvetica Neue", Roboto, Arial, "Droid Sans", sans-serif;
font-size: 13px;
font-weight: 400;
line-height: 1.471;
height: 100%;
}
I can see my bodywho take 100% as the answer of the question linked.
Then I look into my child menu_gauche:
#menu_gauche {
height: 100% !important;
}
The value is 100% so it should work right ?
But for an unknown reason the menu_gauche isn't taking all the height of the parent.
Someone has an idea what could make this happens ?
My html look like this:
<body>
<div class="container body">
<div class="main_container">
<div id="menu_gauche" class="col-md-3 left_col">
<div class="left_col scroll-view">
<div class="navbar nav_title" style="border: 0;">
<a id="logoBoat" class="site_title" href="/"><i class="fa fa-ship"></i> <span>Control Docker!</span></a>
</div>
<div class="clearfix"></div>
<!-- menu profile quick info -->
<div class="profile clearfix">
</div>
<!-- /menu profile quick info -->
<br/>
<!-- sidebar menu -->
<div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
<div class="menu_section">
<!-- {{> loginButtons}} -->
<ul class="nav side-menu">
<li><a><i class="fa fa-desktop"></i> Docker machines <span class="fa fa-chevron-down"></span></a>
Here a picture of the result, the part in red is the menu, the part in black the footer and we can see the body in white. The grey part is a panel that is upside the body so don't worry about it :
both [div class="container body"] & [div class="main_container"] need 100% height as well, because they are the parent elements for menu_gauche.
try adding this:
div.container, div.main_container {
height: 100% !important;
}
It's happening because you are ignoring the <html> area to be height: 100%. The <body> is wrapped inside the <html> area(we ignore it mostly, but it's there).
And therefore, even if you give the <body> 100% height, it won't cover the entire height because the <html> is not set to height: 100%;.
So, to solve the issue, set <html>'s height to 100%.
html {
height: 100%;
}
Ok guys finally I founded ! I needed to modify a bit the CSS like this (main point is adding position:fixed)
.nav-md .container.body .col-md-3.left_col {
width: 230px;
position: fixed;
bottom:0;
background-image: url(/navBar.jpg);
color: #001155;
height: 100% !important;
}
.nav-sm .container.body .col-md-3.left_col {
width: 70px;
padding: 0;
z-index: 9;
position: fixed;
bottom:0;
background-image: url(/navBar.jpg);
color: #001155;
height: 100% !important;
}
I have the image link which displayed on personal website.I am trying to re-size the image by creating css style sheets on this image since i was copy the code direct and paste to the page and i need to displayproperly on mobile devices
code
<div id="TA_selfserveprop634" class="TA_selfserveprop">
<ul id="FkGjsTFbWr" class="TA_links aICFqBWnArX">
<li id="v65BTuNt" class="Id2gL5m3F1"><a target="_blank" href= "https://www.tripadvisor.com/"><img src="https://www.tripadvisor.com/img/cdsi/img2/branding/150_logo-11900-2.png" alt="TripAdvisor"/></a>
</li></ul></div>
<script src="https://www.jscache.com/wejs?wtype=selfserveprop&uniq=634&locationId=307103&lang=en_US&rating=true&nreviews=5&writereviewlink=true&popIdx=true&iswide=false&border=true&display_version=2"></script>
</div>
</div>
CSS
.TA_selfserveprop{
width:10%;
height:10%;
}
.TA_links aICFqBWnArX{
width:10%;
height:10%;
}
.Id2gL5m3F1{
width:10%;
height:10%;
}
When refresh my page this CSS styles does not have any effects on image..
Can anyone let me know on how to rearrange the coding style so that the Size of the image displayed properly on my website.
If you want to make a div responsive and full screen at any device, you should use width: 100% and height: 100%.
#CDSWIDSSP {
width: 100%!important;
height: 100%!important;
}
.TA_selfserveprop {
width: 100%!important;
height: 100%!important;
}
body,
html {
width: 100%;
height: 100%;
}
#CDSWIDSSP .widSSPData {
height: 100%;
}
#CDSWIDSSP .widSSPData {
overflow: auto!important
}
<div id="TA_selfserveprop634" class="TA_selfserveprop">
<ul id="FkGjsTFbWr" class="TA_links aICFqBWnArX">
<li id="v65BTuNt" class="Id2gL5m3F1">
<a target="_blank" href="https://www.tripadvisor.com/">
<img src="https://www.tripadvisor.com/img/cdsi/img2/branding/150_logo-11900-2.png" alt="TripAdvisor" />
</a>
</li>
</ul>
</div>
<script src="https://www.jscache.com/wejs?wtype=selfserveprop&uniq=634&locationId=307103&lang=en_US&rating=true&nreviews=5&writereviewlink=true&popIdx=true&iswide=false&border=true&display_version=2"></script>
</div>
</div>
please note that for height: 100% you need to set this for body and html.