I try currently to make a navbar with images, the navbar should be in middle centered with the image repeated on both sides. However the picture is only repeating on the right side. Anyone got a solution?
#leftHalf {
background: url(images/bg-1.jpg);
width: 50%;
position: absolute;
left: 0px;
height: 100%;
}
#rightHalf {
background: url(images/bg-2.jpg);
width: 50%;
position: absolute;
right: 0px;
height: 100%;
}
i also found this but it is (above) only for the background, do i have to seperate the navbar in 2 container?
JSFIDDLE
Thats what i got so far.
Any help is appreciated.
you need set ul to text-align:center;
find updated fiddle
.navbar2 ul{
text-align: center;
}
Thank you locateganesh it worked, for some reason i got now some placeholders between the buttons seen on your updated jsfiddle. How did this happen? i didnt changed anything only the text algin center.
edit:
i got it to delete the spaces between the images.
.yourclass {
font-size: 0;
}
In css3, you can use multiple images for background-images.
All the background-? rules can be used with the same construct.
<html>
<head>
<title>Image Demo</title>
<style>
body{
text-align: center;
}
#nav{
background-image: url("images/battery1.jpg"), url("images/battery2.jpg");
background-repeat: no-repeat, no-repeat;
background-position: left top, right top;
width: 100%;
height: 200px;
}
</style>
</head>
<body>
<div id="nav">some text</div>
</body>
</html>
Try it, but you'll need your own battery pics.
Related
Good evening,
I'm very new to html and was searching for a solution but I did not found any. So what I'm trying to do is to fix the background and put something like a panel over it, where I do the rest of the site like text etc. I have an example website: https://420cheats.com
I don't know if I am right but I think I have to add a second class and put this somehow over the background
Thanks in advance.
Ps: I did the background as a class in the css file.
You can just set a fixed background-image on your body element. Both the <body> and <html> tag need a set height of 100% for this to work.
body, html {
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-image: url('https://cdn.cnn.com/cnnnext/dam/assets/170407220921-07-iconic-mountains-pitons-restricted.jpg');
height: 100%;
background-attachment: fixed;
}
.content {
background-color: rgba(204,204,204,0.5);
width: 80%;
margin: 20px auto 20px auto; /* top right bottom left */
height: 1500px; /* remove this, just here to show that it works */
}
<div class="content">
<h1>Content</h1>
</div>
You will need to set the background as fixed and create a DOM element to lay on top of your background image.
body {
background: url('https://cdn-image.travelandleisure.com/sites/default/files/styles/1600x1000/public/1507062474/hotel-everest-namche-nepal-mountain-lodge-MOUNTAIN1017.jpg?itok=g-S4SL9n') no-repeat fixed;
background-size: cover;
}
div {
padding: 20px;
width: 400px;
height: 1200px;
background: rgba(0,0,0,.5);
}
<div>test</div>
My background image is not covering all contents on my page, rather it's applying only half of the screen.
The same code with same image is properly working on my another page.
Only the difference is that i have a lot of content on this page but i think that doesn't matter.
Where is the issue?
Thanks in advance.
html
<html>
<head>
</head>
<body>
<div id="main">
<!--Here i have multiple sections-->
</div>
</body>
</html>
css
#main {
position: relative;
}
#main:before {
content : "";
display: block;
position: absolute;
top: 0;
left: 0;
background: url(../..//images/3.jpg) center center fixed;
width: 100%;
height: 100%;
opacity : 0.2;
filter: alpha(opacity=20);
z-index: -1;
try this code
background-size:100% 100%;
Hi, you just try with following CSS snippets
background: url(../..//images/3.jpg);
background-repeat:no-repeat;
background-size:contain;
This method will work
body
{
margin:0px;
width: 100%;
height: 100%;
}
#main {
background-image: url('download.jpg');
width: 100%;
height: 100%;
background-size: 100% 100%;
background-repeat: no-repeat;
}
Here you are using a psudeo element :before .The functionality of psudeo element :before is as follows.
It would attach a child node at the first index.In your case you are trying to attach an image before the div element.And this does not correspond to your whole body.
To make the image applicable to your whole body try this:
body
{
margin:0px;
width: 100%;
height: 100%;
background: url(../..//images/3.jpg) repeat left top;
}
And remove your psudeo element :before
#main {
position: relative;
/*Other CSS Properties*/
}
try this one
background-image: url(path-to-file/img.jpg);
background-repeat:no-repeat;
background-position: center center;
I guess you have missed a double quote while writing your ID.
<html>
<head>
</head>
<body>
<div id="main">
<!--Here i have multiple sections-->
</div>
</body>
</html>
:)
I have a responsive header.
Here's the code for the hero section:
.hero {
background: url(../../img/hero.jpg);
background-size: cover;
background-position: center center;
position: relative;
height: 100vh;
margin: 0;
#include breakpoint($x-large) {
padding-left: 5%;
padding-right: 5%;
}
It's all great and responsive; however, when I open the console on web or keyboard on android the vh doesn't change and the button and text elements stay shifted down.
I've tried adding padding and specific media queries and other solutions, but I cannot find a universal effective solution...
Why is this happening and how can I resolve this?
You need to attach .container-hero to the bottom of the .hero.
.container-hero {
position: absolute;
bottom: 5%;
}
You'll also need to fix your layout due to position: absolute;.
But you get the idea :)
<style>
div {
width: 100%;
height: 400px;
background-image: url('http://i.stack.imgur.com/gwAUR.jpg');
background-size: 100% 100%;
border: 1px solid red;
}
</style>
</head>
<body>
<p>Resize the browser window to see the effect.</p>
<div></div>
</body>
I am attempting to build a, simple, single page website with only css as an exercise to familiarize myself with css.
I have three background images stacked on each other. Each image is set to a height of 100vh. This gives each image a nice look but I tried using the 'top' attribute to place text in the middle of the page, the text didnt move.
Can someone tell me why 'top' doesnt work in this circumstance? And a way to get around it?
This is my CSS:
#page1 {
background-size: cover;
background-image: url('Page1_f09078_f06078_1000_vertical.png');
height: 100vh;
display: block;
}
#welcome {
text-align: center;
top: 50%; <-- This attribute won't work
}
#page2 {
background-size: cover;
display: block;
background-image: url('Page2_f06078_ffa860_1000_vertical.png');
height: 100vh;
}
#page3 {
background-size: cover;
display: block;
background-image: url('Page3_ffa860_f09078_1000_vertical.png');
height: 100vh;
}
This is my html:
<html lang="en">
<head>
<link href="SinglePage.css" rel="stylesheet">
</head>
<body>
<div id="page1">
<h2 id="welcome">Welcome!</h2>
</div> <!-- End of page1 -->
<div id="page2">
</div>
<div id="page3">
</div>
</body>
</html>
top, left, right and bottom css properties work only when used with relative, absolute or fixed position.
Use following css:
#page1 {
position: relative;
}
#welcome {
transform: translateY(-50%);
text-align: center;
position: absolute;
top: 50%;
right: 0;
left: 0;
}
The top, right, bottom, and left properties specify the position of positioned elements.
Go through this link: https://developer.mozilla.org/en/docs/Web/CSS/position
Add Position:relative;
#welcome {
position: relative;
text-align: center;
top: 50%;
}
body {
height: 100%;
background-color: #f8f8f8 ;
background-image: url('images/bottom-right.png'); /*Images*/
background-position: right bottom; /*Positioning*/
background-repeat: no-repeat; /*Prevent showing multiple background images*/
}
so i have this code that put the image in the bottom right of the body, but the problem is its not positioning in the way that i want it. It goes to the right but not in the bottom. It's only as tall as the content inside it, just like a div or anything else. Can u please help me to achieve what i want.
here is the image -> http://tinypic.com/view.php?pic=2iabd3p&s=8 thanks
You also need to set a height on the html and remove the margin on the body:
body {
height: 100%;
background-color: #f8f8f8;
background-image: url('http://www.placehold.it/100x100');
background-position: right bottom;
background-repeat: no-repeat;
margin:0;
padding:0;
}
html {
height:100%;
}
jsFiddle example
Simply setting height: 100%; isn't going to work in all instances. While I generally dislike using CSS2 position too often this may help you in this situation...
body, html
{
bottom: 0px;
left: 0px;
overflow: auto;
position: absolute;
right: 0px;
top: 0px;
}