I did some UI practice and there is a problem with the background-image to body tag. The image is overflowing horizontally and I want to get rid of that. Plz help me.
Code how I tried to fixed it.
<style type="text/css">
body {
background: url("public/res/bg(WT).png") no-repeat fixed center center;
background-size: cover;
}
</style>
The problem illustration : (red box)
My full code is like
<html>
<head>
<style>
* { margin:0; padding:0; }
body {
background: url("public/res/bg(WT).png") no-repeat fixed center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
</head>
<body>
//contents are here
</body>
</html>
Try this
* { margin:0; padding:0; }
body {
background-image: url("http://unsplash.it/2500/1000");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position:center;
background-attachment: fixed;
}
<body>
</body>
wrap the entire content below <body> with a div and apply overflow: hidden for it.
.wrapper {
overflow: hidden;
}
https://i.imgur.com/gPpaxlH.png take this as a reference. i have wrapped everything except the script and the div as i think that was generated with JS. remove overflow-x from <body>
in any project, make it a rule to follow this.
Related
I have tried everything and cannot figure out why I cannot get the background image to show up for this div.
**Here is the code:**
body {
margin: 0px;
padding: 0px;
}
#top {
background-image: url(../IMG/PINS.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
<html>
<head>
<title>TEST BCKGRND IMAGE</title>
<link rel="stylesheet" type="text/css" href="CSS/style.css">
</head>
<body>
<div id="top">
</div>
</body>
</html>
The file structure is set up like this: I have a main folder called TEST_SITE, inside of that folder I have a folder for my CSS and a folder for my images called IMG.
I cannot for the life of me figure out why the background image is not showing up.
If anyone can please give me a heads up as to what might be wrong, I would truly appreciate it.
Thanks.
setting the height of the #top div is important: if you set the width, and then the height to auto, then the background still won't show because there is nothing within the div to put a background to. However, if you force a height by setting one in the css, then the background will show.
The code you have given for your path is incorrect because the background-image expects only a path to an image (and nothing else), whereas what you have given is suited to the background.
See my fiddle
You need to set a height and width value from the #top and use the background-position:center center; background-repeat:no-repeat; like my answer: for example
#top{
width:500px;
height:500px;
background-image: url(YOUR IMAGE PATH);
background-repeat:no-repeat;
background-position:center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
or you can make it like this:
#top{
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background:url(YOUR IMAGE PATH) no-repeat fixed center;
width:500px;height:500px;
}
It is because your div is empty. If you add content to it then you will see the background. You can also set a height or add padding with CSS.
<div id="top">
<p>A large amount of text here</p>
</div>
or
#top{
height:400px;
background-image: url(yourimagehere);
background-repeat:no-repeat;
background-position:center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
or
#top{
padding: 25px 0;
background-image: url(yourimagehere);
background-repeat:no-repeat;
background-position:center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Hello I've done this: http://inventors.000webhostapp.com
and the thing is I'd like to make each background image fit the entire screen.
For that matter I searched and found this:
html {
background: url("https://images.pexels.com/photos/370799/pexels-photo-370799.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
<html>
<body>
<div>
<p>hello</p>
</div>
</body>
</html>
that made 1 of the pictures fit all the screen but my problem comes when I want to add a second one.
What I did is create
.p1 {
background: url(1.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.p2{
background: url(2.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="p1">
<p>hello</p>
</div>
<div class="p2">
<p>hello</p>
</div>
</body>
</html>
That makes the background images just tiny (the height of hello)
Here comes the question:
Is there any way to make those 2 images fit all the screen one after the other?
So I would see all the first image when I open the WebPage and when I scroll all the way to the bottom I would see entirely the second image?
Obviously I plan to put more than 2 background images for my portfolio but this is a good way, I think, to start with!
You have to set the size for your container. You can set the viewport size for the container with 100vh (height) and 100vw (width). See the following example:
html, body {
padding:0;
margin:0;
}
.p1 p, .p2 p {
display:inline-block;
}
.p1 {
background: url(http://placehold.it/100x100) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height:100vh;
width:100vw;
}
.p2{
background: url(http://placehold.it/101x101) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height:100vh;
width:100vw;
}
<div class="p1">
<p>hello</p>
</div>
<div class="p2">
<p>hello</p>
</div>
As noted by Axnyff in the comments background-size:cover only affects the way the background fills the containing element. In order to make these elements fill the screen you can use the vh viewport height unit.
body, p {
margin: 0;
}
.p1, .p2 {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
height: 100vh;
}
.p1 {
background-image: url(http://lorempixel.com/400/200/nature/1/);
}
.p2{
background-image: url(http://lorempixel.com/400/200/nature/2/);
}
<div class="p1">
<p>hello</p>
</div>
<div class="p2">
<p>hello</p>
</div>
Edit:
One vh unit is equal to 1% of the viewport height hence the use of 100vh in my example to fill the viewport.
i have a background image and i want to use it on my website but the problemn is i cant make it full height and width in any size, help me and please, check the codes below
current code, code #1 : haft and not full
body {
background: url(http://localhost/wordpress/wp-content/uploads/2016/11/CHRISTINE-BACKGOURND.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
/* background-size: cover; */
height: auto!important;
width: 100%!important;
}
code # 2
body {
background: url(http://localhost/wordpress/wp-content/uploads/2016/11/CHRISTINE-BACKGOURND.jpg) no-repeat center center fixed;
background-color: white;
background-size: auto 100%;
background-repeat: no-repeat;
background-position: left top;
}
i cant make it full width and height :( please help
html{
width:100%,height:100%;
}
body{
background-image: url(https://i.stack.imgur.com/s0G3w.jpg);
height:100%;
width:100%;
}
<body>
</body>
Please try this
HTML
<body></body>
CSS
html{
width:100%,height:100%;
}
body{
background: url(../image.jpg) no-repeat;
background-size:cover;
height:100%;
width:100%;
}
In body tag, I added a background-image. But the image is repeated 4 times. How to fix that to display it only single time?
HTML code:
<body background="image.png"></body>
CSS code:
body{
background-image : no-repeat;
}
It's background-repeat
body
body{
background-repeat: no-repeat;
}
You can add style to the body tag using the style attribute:
<body style="background-image:url('image.png');background-repeat: no-repeat;">
hi now used to this
body{background:url('image.png') no-repeat};
or this
body{
background-image:url('image.png'); // for your body background
background-repeat: no-repeat; // for your body background repeat
}
Remove background from body and apply your CSS like below.
body
{
background-image:url('image.png');
background-repeat:no-repeat;
}
html {
background: url(http://p1.pichost.me/i/64/1886374.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
<html>
<body>
</body>
</html>
Hi i'm trying to create a hero section that has a 100% width and height. I know there are many questions on this topic but none of them seems to be working for me. What I want to achieve is a section with an image and some text that is the first thing the user sees. When the user scrolls the rest of the website is shown.
When i run my code I get white bars around the image and i've tried to set margin to 0px nut i does not work.
Sorry for bad English.
This is some of my code:
HTML:
<section id="hero-section">
<h4>Welcome to</h4>
<h1>ALEX WEIT</h1>
</section>
</body>
CSS:
body, html{
height: 100%;
}
#hero-section{
background-image: url(../Images/Lake.jpg);
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: 100%;
}
Screenshot:
http://postimg.org/image/qsutt7d6n/
I tested here in my jsfiddle and worked correctly:
the HTML is the same:
<section id="hero-section">
<h4>Welcome to</h4>
<h1>ALEX WEIT</h1>
</section>
I changed the CSS, the background-image to background-color to test and add a "*" selector:
* {
margin:0;
}
body, html {
height:100%;
}
#hero-section {
background-color: red;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: 100%;
}
See the sample here: http://jsfiddle.net/yv3vkqfw/