Don't work background-image in div with class nav-item. All images are in the same directory. Background in header works. And with img src everything is good. Where is the problem?
I tried everything.
header {
background: url('backSmall2.png');
height: 670px;
}
img {
width: 14%;
transform:skewY(-1deg);
margin-top: 40px;
margin-left: 40px;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
transform: rotate(-3deg);
}
.nav-item {
width: 12%;
background-image: url('frame.png');
margin-top: 80px;
margin-left: 140px;
}
.logo-contacts {
background-image: url('frame.png');
}
.contacts {
width: 100%;
height: 300px;
background-color: aqua;
}
<!DOCTYPE html>
<html>
<head>
<link href="normalize.css" rel='stylesheet'>
<link href="index-style.css" rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Roboto+Condensed&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
<script src="jquery-2.2.1.js"></script>
</head>
<body>
<header>
<img src="logo1.png">
<div class="nav-item"></div>
</header>
<a name="contacts">
<div class="contacts">
</div>
</a>
</body>
</html>
You should give your background-image some more information about position.
For example:
.nav-item {
width: 12%;
background-image: url('frame.png');
background-position: center; /* Added */
background-size: cover; /* Added */
background-repeat: no-repeat; /* Added */
margin-top: 80px;
margin-left: 140px;
}
Read more about the background property at Mozilla Developer Network.
The problem is that your div is empty - So - it has no height. Try adding height to the CSS class:
.nav-item {
width: 12%;
background-image: url('frame.png');
margin-top: 80px;
margin-left: 140px;
height: XXXpx;
}
<!-- language: lang-css -->
header {
background: url('backSmall2.png');
height: 670px;
}
img {
width: 14%;
transform:skewY(-1deg);
margin-top: 40px;
margin-left: 40px;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
transform: rotate(-3deg);
}
.nav-item {
width: 600px;
height:600px;
background-image: url('frame.png');
margin-top: 80px;
margin-left: 140px;
}
.logo-contacts {
background-image: url('frame.png');
}
.contacts {
width: 100%;
height: 300px;
background-color: aqua;
}
<!DOCTYPE html>
<html>
<head>
<link href="normalize.css" rel='stylesheet'>
<link href="index-style.css" rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Roboto+Condensed&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
<script src="jquery-2.2.1.js"></script>
</head>
<body>
<header>
<img src="logo1.png">
<div class="nav-item"></div>
</header>
<a name="contacts">
<div class="contacts">
</div>
</a>
</body>
</html>
Related
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./test.css">
</head>
<body>
<header>
<div class="background">
<div class="logo"></div>
<div class="imgboxd">
<img src="../img/sec1.png" alt="">
</div>
<div class="boxss"></div>
</div>
</header>
</body>
</html>
css
* {
margin: 0;
padding: 0;
}
header {
width: 100%;
height: 750px;
background-color: #0D1430;
position: absolute;
}
.logo {
width: 54px;
height: 68px;
background: url("../img/logo.png") no-repeat center/cover;
margin: 60px auto 20px;
}
header .background .imgboxd {
text-align: center;
}
header .background .imgboxd img {
width: 650px;
height: 500px;
}
#media screen and (max-width: 768px) {
header {
width: 100%;
height: 50%;
box-sizing: border-box;
border: 5px solid yellow;
}
.background {
width: 100%;
}
header .imgboxd img {
width: 100px;
height: 100px;
}
.boxss {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 50%;
height: 30%;
border: 2px solid red;
}
}
I don't know why css-mediaquery does't working.
.imgbox tag doesn't work only in (max-width: 768px)
I know that under line code work in prority.
What should I do?
1.
I input img tag(html tag) in imgboxd(html tag)
2.
use imgboxd only,
input img link in imgboxd (css)
But, 2 kinds method does not working
Use the same selector in your media query
I noticed you didn't use the same CSS selector for the image inside your media query.
What you wrote outside the media query was this:
header .background .imgboxd img
In your media query in the question you have this:
header .imgboxd img
But you have to use the same selector both times.
Also see CSS Specificity
See working snippet below:
* {
margin: 0;
padding: 0;
}
header {
width: 100%;
height: 750px;
background-color: #0D1430;
position: absolute;
}
.logo {
width: 54px;
height: 68px;
background: url("https://picsum.photos/54/68") no-repeat center/cover;
margin: 60px auto 20px;
}
header .background .imgboxd {
text-align: center;
}
header .background .imgboxd img {
width: 650px;
height: 500px;
}
#media screen and (max-width: 768px) {
header {
width: 100%;
height: 50%;
box-sizing: border-box;
border: 5px solid yellow;
}
.background {
width: 100%;
}
header .background .imgboxd img {
width: 100px;
height: 100px;
}
.boxss {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 50%;
height: 30%;
border: 2px solid red;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<header>
<div class="background">
<div class="logo"></div>
<div class="imgboxd">
<img src="https://picsum.photos/seed/so/1200/960" alt="">
</div>
<div class="boxss">Example text</div>
</div>
</header>
</body>
</html>
I want to put a picture right to left of my header div.
Failed to do it. Could you help me?
The Div is 80% width
and centered with "margin: 0 10%;"
HTML Code:
<html>
<head>
<title> Yakir Freed </title>
<link rel="stylesheet" href="css/style.css">
<img id="logo" src="images/logo.png" alt="Yakir Freed" />
<div id="header">
</div>
</head>
CSS Code :
body {
background-color: darkgray;
background-image: url('../images/website.jpg');
background-repeat: repeat-x;
}
#logo {
position: fixed;
display: inline-block;
left: 0px;
top: 0px;
margin: 0 10%;
z-index: 2;
}
#header {
position: fixed;
display: inline-block;
margin: 0 10%;
top: 0px;
width: 80%;
height : 150px;
background: rgb(217, 47, 54);
z-index: 1;
}
Right aligned to the outside of the red box header?
Could do something like this and change the left: -279px to the width of your logo
body {
background-color: darkgray;
background-image: url('../images/website.jpg');
background-repeat: repeat-x;
}
#logo {
position: absolute;
display: inline-block;
left: -279px;
top: 0px;
z-index: 2;
}
#header {
position: fixed;
display: inline-block;
margin: 0 10%;
top: 0px;
width: 80%;
height : 150px;
background: rgb(217, 47, 54);
z-index: 1;
}
<html>
<head>
<title> Yakir Freed </title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="header">
<img id="logo" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Yakir Freed" />
</div>
</body>
</html>
Hi there I'm having some trouble with some code for school. I need to get my webpage to adjust as I adjust the internet explorer window, any help is very appreciated and all of my code is posted below
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cycling Tours</title>
<link rel="stylesheet" type="text/css" href="Cstyles.css">
</head>
<body>
<article id="HeadContent>
<header id="Head">
<h1 id="CycleTours">Cycle Tours</h1>
<figure>
<img id="BikeAxle" src="images/bicycle_axle.jpg" alt="bikeaxle"/>
<img id="BikeBanner" src="images/bicycle_banner.jpg" alt="bikebanner"/>
</figure>
</header>
</article>
</body>
</html>
* {
margin: 0;
padding: 0;
}
#Head {
background-color: #C0C0C0;
height: 600px;
width: 80%;
margin-left: 10.5%;
}
#BikeBanner {
position: absolute;
width: 70%;
margin-top: -4%;
height: 300px;
margin-left: 2.2%;
}
#CycleTours {
position: fixed;
margin-top: 7%;
color: white;
margin-left: 50%;
z-index: 1;
}
#HeadContent {
margin-left: 12%;
margin-right: 12%;
}
I am designing a header menu for my website. I want to place my logo on header menu such that I get something like this :
But, with my css, what I am getting is :
My CSS is :
*{
background-color: #DBDBDB;
}
.headerMenu{
background-image: url(../img/headerMenu.png);
height: 50px;
border-top: 0px;
border-bottom: 0px;
padding-top: 0px;
padding-left: auto;
padding-right: auto;
width: 100%
}
#wrapper{
background-image: url(../img/headerMenu.png);
margin-right: auto;
margin-left: auto;
width: 1000%;
padding-top: 0px;
padding-bottom: 0px;
}
.logo{
width: 80px;
}
.logo img
{
padding-left: 50px;
width: 150px;
height: 38px;
}
PS : The logo is transparent. I don't know why this is happening. Please help me out.
HTML :
<!doctype html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="./css/normalize.css">
<link rel="stylesheet" type="text/css" href="./css/style.css" />
</head>
<body>
<div class="headerMenu">
<div id="wrapper">
<div class="logo">
<img src="./img/logoS.png"/>
</div>
</div>
</div>
</body>
</html>
Remove background Color from
*{
background-color: #DBDBDB;
}
Make it as
body{
background-color: #DBDBDB;
}
Solution 1
Remove:
*{
background-color: #DBDBDB;
}
and only apply that to the elements you need (probably the body or .wrapper).
Solution 2
Remove the background of .logo and img
.logo, img {
background-color:none;
}
I have a bit of an issue with Firefox(v30). I'm making a site, using jQuery Fullpage scroller and the whole site works in Chrome(v35), IE(11), Opera(v22), but not in firefox. Some of the stylings appear, like the font and colors, but none of the images or the backgrounds and even the Sections are not displaying properly. Could you look at it please, because I have made another site with the Fullpage script and it's working under firefox and I've used the same method everywhere and now it just doesn't want to work. The address is: http://sikitomi.hopto.org/bts
Here is my index file:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content="">
<meta name="keywords" lang="en" content="">
<meta name="robots" content="INDEX,FOLLOW">
<title>Body Training Solutions</title>
<link rel="stylesheet" href="./css/style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="./css/jquery.fullPage.css" type="text/css" media="screen" />
<!-- <link href="favicon.ico" rel="icon" type="image/x-icon" /> -->
<script type="text/javascript" src="./js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="./js/jquery.easings.min.js"></script>
<script type="text/javascript" src="./js/jquery.slimscroll.min.js"></script>
<script type="text/javascript" src="./js/jquery.fullPage.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#fullpage').fullpage({
loopTop: true,
loopBottom: true
});
});
</script>
</head>
<body>
<div id="fullpage">
<div class="section" id="section0">
<div class="left">
<p><img src="./img/logo.png" alt=""/></p>
<p>FULL SITE</p>
<p>COMING SOON</p>
</div>
<div class="arrow">
<img src="./img/arrow.png" alt=""/>
</div>
</div>
<div class="section" id="section1">
<h1>UPCOMING EDUCATION COURSES</h1>
<div class="arrow">
<img src="./img/arrow.png" alt=""/>
</div>
</div>
<div class="section" id="section2">
<div class="bg"></div>
<h1>OUR CLASSES</h1>
<div class="arrow">
<img src="./img/arrow.png" alt=""/>
</div>
<ul>
<li class="trx"><img src="./img/trx.png" alt="TRX"/></li>
<li class="trx"><img src="./img/trigger.png" alt="TriggerPoint"/></li>
<li class="trx"><img src="./img/ankorr.png" alt="Ankorr"/></li>
</ul>
</div>
<div class="section" id="section3">
</div>
</div>
</body>
</html>
And here's the style.css I've made:
/* Font */
#font-face
{
font-family: 'canterbold';
src: url('canter_bold-webfont.eot');
src: url('canter_bold-webfont.eot?#iefix') format('embedded-opentype'),
url('canter_bold-webfont.woff') format('woff'),
url('canter_bold-webfont.ttf') format('truetype'),
url('canter_bold-webfont.svg#canterbold') format('svg');
font-weight: normal;
font-style: normal;
}
/* Defaults */
html, body, p, h1, h2, h3, h4, h5, h6, div, ul
{
padding: 0;
margin: 0;
font-weight: normal;
list-style: none;
}
img
{
border: 0;
width: auto;
height: 100%;
}
p img
{
width: auto;
height: auto;
}
/* Customisations */
body
{
background: #fff;
font-family: 'canterbold';
color: #fff;
}
#section0
{
display: inline-block;
background: url('../img/slide01bg.jpg') no-repeat center center;
background-size: cover;
}
#section0 .left
{
position: absolute;
top: 5%;
left: 0px;
width: 36%;
height: 95%;
text-align: center;
font-size: 10vh;
font-size: 600%;
}
#section0 p
{
padding: 2% 0px;
}
#section0 .arrow
{
position: absolute;
right: 0px;
bottom: 2%;
left: 0px;
width: 36%;
height: 12%;
text-align: center;
}
#section1
{
background: url('../img/slide02bg.jpg') no-repeat center top;
background-size: cover;
}
#section1 h1
{
position: absolute;
top: 4%;
left: 2%;
display: inline;
text-align: left;
font-size: 8vh;
font-size: 480%;
}
#section1 .arrow
{
position: absolute;
right: 0px;
bottom: 2%;
left: 0px;
height: 12%;
text-align: center;
}
#section2
{
background: url('../img/slide03bg.jpg') center bottom;
background-size: cover;
text-align: center;
}
#section2 h1
{
position: absolute;
top: 1%;
left: 5%;
display: inline;
text-align: left;
font-size: 8vh;
font-size: 480%;
color: #3c3c3c;
z-index: 10;
}
#section2 .bg
{
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
width: 100%;
height: 70%;
background: url('../img/slide03middle.png') no-repeat center center;
background-size: contain;
z-index: 0;
text-align: center;
}
#section2 .arrow
{
position: absolute;
right: 0px;
bottom: 2%;
left: 0px;
height: 12%;
z-index: 10;
text-align: center;
}
#section2 ul
{
display: block;
position: absolute;
right: 0px;
bottom: 0px;
left: 0px;
height: 37%;
}
#section2 li
{
width: 33%;
height: 35%;
display: inline-block;
font-size: 0;
}
#section3
{
background: url('../img/slide04bg.jpg') center bottom;
background-size: cover;
}
Any help appreciated, because this is really driving me nuts at this stage... :(
Thanks a lot!
the doctype is missing, try adding <!DOCTYPE html>before the <html> tag