I am looking for the page look; when there is a (what looks like) frame in the centre and an image around that or a blank background. http://hopelessrecords.com/about-us/ this is a link to a site, the page and background idea is what I would like to achieve.
(I didn't know how to phrase this properly so forgive me if my terminology is off and there is something out there that I missed when searching).
Try it in css
html {
height: 100%;
width: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background: url(./yourImage.jpg);
background-repeat: no-repeat;
background-position: top center;
background-size: cover;
}
.yourPage {
max-width: 1230px;
margin: 0 auto;
background-color: #fff;
}
And this in html
<div class="yourPage">
Your content
</div>
html {
height: 100%;
width: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background: url(http://lorempixel.com/400/200/);
background-repeat: no-repeat;
background-position: top center;
background-size: cover;
}
.yourPage {
max-width: 400px;
margin: 0 auto;
background-color: #fff;
}
<div class="yourPage">
Your content
</div>
Just add the below to your styles.css
body { padding: 5em 15em; /* adds a spacing of 5x the font size to the top and bottom, and 15x of that to the left and right sides of the page. */
Read for a complete guide on padding, or check MDN article on box-model
Related
Is there anyway to make my body background image to be responsive in any mobile view? Especially when the height is 412x980? I know how to use some proper background cover
body {
background: url(../../something.jpg);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
}
But I wanted to not use fixed because I need to stay all elements on that background image.
EDIT:
After using #VIKESIR provided code, I still getting whitespace after trying to resizing every mobile views, I got the mobile view sizes here. Something like this
#media screen and (max-width: 479px) {
* {
margin: 0;
padding: 0;
}
html,body {
width: 100%;
height: 100%;
box-sizing: border-box;
}
body {
background: url(https://www.psdstack.com/wp-content/uploads/2019/08/copyright-free-images-750x420.jpg) no-repeat center cover;
width: 100%;
min-height: 100vh;
}
}
<body></body>
and this is what I meant still getting a whitespace after using the provided code.
By default body height is nothing, so we need to define height.
Here is some css except body tag in last one, that you can configure in every style.css when you create new stylesheet.
* {
margin: 0;
padding: 0;
}
html,body {
width: 100%;
height: 100%;
box-sizing: border-box;
}
body {
background-color: #fa0;
}
.title {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.title h1 {
color: #000;
text-shadow: 1px 1px 0px #fff;
text-align: center;
}
#media (max-width: 479px) {
body {
background: url(https://www.psdstack.com/wp-content/uploads/2019/08/copyright-free-images-750x420.jpg) no-repeat center / cover;
width: 100%;
min-height: 100vh;
}
}
<body>
<div class="title">
<h1>TESTING<br>TESTING TESTING</h1>
</div>
</body>
This Page
Code:
html,
body {
height: 100%;
min-height: 100%;
width: 100%;
min-width: 100%;
}
body {
margin: 0;
padding: 0;
}
#particles-js {
position: absolute;
width: 100%;
height: 100%;
background: url("../img/background.jpg") no-repeat 50% 50%;
background-size: cover;
}
<div class="container-fluid background">
<div class="row justify-content-center">
<div id="particles-js">
</div>
</div>
</div>
Now I need to remove this white line and the scroll I need page full width and height background-image I tried overflow: hidden
but in mobile responsive have problem with login box.
Is late to say it but just put:
*{
margin: 0;
}
I just had this problem and found the explanation in this answer to be extremely helpful.
You might want to try using the following code to center your image:
html {
height: 100%
}
body {
background-image: url("../img/background.jpg");
height: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
This should remove that white line from the bottom of your page.
I was wondering how to center 3 divs inside a div.
Here is my code example
body {
position: fixed;
height: 100%;
width: 100%;
}
#container {
border: 3px solid black;
height: 90%;
width: 90%;
}
.plaatje {
width: 30%;
height: 70%;
border: 2px solid black;
float: left;
text-align: center;
}
#plaatje1 {
background-image: url("http://image.prntscr.com/image/c3d5dbc04f664a3386b372d8e4ceb4c7.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
#plaatje2 {
background-image: url("http://image.prntscr.com/image/2bcfd124f98a448cbae822337818ff4e.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
#plaatje3 {
background-image: url("http://image.prntscr.com/image/e1b7059d626f47cb94535bbba9887cc1.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
<div id="container">
<div id="plaatje1" class="plaatje">
</div>
<div id="plaatje2" class="plaatje">
</div>
<div id="plaatje3" class="plaatje">
</div>
</div>
The problem is, there is still a white space on the right hand-side of the picture, I have marked it so you know what i'm talking about.
It also needs to scale, so if I resize the window, that the third image doesn't pops below the first or that the space exists when I resize it fully.
Any help is appreciated.
I have created a jsFiddle which demonstrates how you can do this using flexbox. It doesn't require floating the elements and gives you with exactly what you're looking for.
I have added a wrapper around the images (.images) and given it the flex properties required to align its contents, then removed the floats and a few other unnecessary things.
Here is the browser support for flexbox: caniuse:flexbox
body {
position: fixed;
height: 100%;
width: 100%;
}
#container {
border: 3px solid black;
height: 90%;
width: 90%;
}
.images {
height: 90%;
display: flex;
justify-content: center;
}
.plaatje {
width: 30%;
height: 70%;
border: 2px solid black;
background-size: 100% 100%;
background-repeat: no-repeat;
}
#plaatje1 {
background-image: url("http://image.prntscr.com/image/c3d5dbc04f664a3386b372d8e4ceb4c7.png");
}
#plaatje2 {
background-image: url("http://image.prntscr.com/image/2bcfd124f98a448cbae822337818ff4e.png");
}
#plaatje3 {
background-image: url("http://image.prntscr.com/image/e1b7059d626f47cb94535bbba9887cc1.png");
}
<div id="container">
<div class="images">
<div id="plaatje1" class="plaatje"></div>
<div id="plaatje2" class="plaatje"></div>
<div id="plaatje3" class="plaatje"></div>
</div>
</div>
You could just simply try adding text-align:center; to your container div
There are many ways to do this, and you should probably start with http://www.w3schools.com/css/css_align.asp - this elementary level question often gets flagged as not appropriate for SO.
But! Welcome. Here's one way you could do this - I've added comments to explain what's going on. Basically your float: left by definition made the .plaatjes impossible to center; and the text-align: center needs to be on the containing element
body {
position: fixed; /* probably don't actually want */
height: 100%;
width: 100%;
margin: 0; /* add */
}
#container {
border: 3px solid black;
height: 90%;
width: 90%;
margin-left: 5%;
text-align: center; /* add */
}
.plaatje {
width: 30%;
height: 70%;
border: 2px solid black;
/* float: left; // remove
text-align: center;*/
display: inline-block; /* add */
}
#plaatje1 {
background-image: url("http://image.prntscr.com/image/c3d5dbc04f664a3386b372d8e4ceb4c7.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
#plaatje2 {
background-image: url("http://image.prntscr.com/image/2bcfd124f98a448cbae822337818ff4e.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
#plaatje3 {
background-image: url("http://image.prntscr.com/image/e1b7059d626f47cb94535bbba9887cc1.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
<div id="container">
<div id="plaatje1" class="plaatje">
</div><div id="plaatje2" class="plaatje">
</div><div id="plaatje3" class="plaatje">
</div>
</div>
<!-- removed spaces between the divs -->
What I need (and failed) to do is website like in this picture:
Website need to be full screen and no scroll.
I'm not satisfied with results, because:
-when website is opened on vertical screens (smartphones) the bottom border is too big
-I also tried to make this background image to show fully top and bottom (I want to faces at top and bottom to be seen in full, not just partly), but I don't really know how to do it.
My CSS code:
html
{
background: #f36d32;
width: 98%;
height: 95.9%;
padding: 1%;
}
body
{
background: url(http://web-industry.eu/landing/img/bg.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 100%;
height: 100%;
}
Ok, the border problem is solved by #imGaurav with such a code:
body {
background: url('http://web-industry.eu/landing/img/bg.png') no-repeat;
background-size: 100% 100%;
width: 100vw;
height: 100vh;
box-sizing: border-box;
border: #f36d32 3px solid;
padding: 0;
margin: 0;
}
<body></body>
But I still can't figure out how to make both top and bottom faces to be visible.
body {
background: url('http://web-industry.eu/landing/img/bg.png') no-repeat;
background-size: 100% 100%;
width: 100vw;
height: 100vh;
box-sizing: border-box;
border: #f36d32 3px solid;
padding: 0;
margin: 0;
}
<body></body>
So you just want the full size image to scale with different with different screen sizes?
In your css on the image div try:
background-size: contain;
If that is not what you are after, here is a link to all the property values you can use and test out.
http://www.w3schools.com/cssref/css3_pr_background-size.asp
Add below CSS to your HTML body
position: absolute;left: 0;top: 0;
Did you mean somethink like that?
<div class="vertical-container">
<div class="vertical-middle">
<img src="http://www.susansolovic.com/blog/wp-content/uploads/2014/04/instagram-logo-md-300x300.png">
</div>
</div>
html,body {
height: 100%;
}
img {
max-width: 100%;
max-height: 100%;
}
.vertical-container {
background-color: green;
display: table;
height: 100%;
width: 100%;
text-align: center;
}
.vertical-middle {
height: 100%;
vertical-align: middle;
display: table-cell;
}
https://jsfiddle.net/org72bfb/1/
You can use the following css to solve the problem. Reference CSS-trick
html {
background: url(http://i.stack.imgur.com/zRKcX.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I am beating my head against a wall on this one. I am trying to design a landing page, with a full screen picture background, that stops at the footer. So essentially I believe my trouble lies in creating a sticky footer..
I have been following the tutorial at this website.
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<code omitted>
</head>
<body>
<div id="wrapper">
<div id="bkgcontainer"></div>
<div class="push"></div>
</div>
<footer>
<address>
<code omitted>
</address>
</footer>
</body>
</html>
My CSS:
* {
margin: 0;
}
html, body{
height: 100%;
background-color: black;
}
#wrapper {
width: 100%;
position: relative;
min-height: 100%;
margin: 0px auto -25px;
}
footer, .push {
height: 25px;
}
#bkgcontainer {
width: 100%;
height: 100%;
position: relative;
margin: 0 auto -25px;
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
display: block;
}
footer{
text-align: center;
margin: 0px auto;
color: white;
position: relative;
}
As far as I can tell, I have everything set right. But when I launch the website, 'bkgcontainer' takes up the full screen and the bottom margin '-25' is below the view-port. I'm at a loss, any ideas? Fixes or better ways, I'm all ears.
You can make the picture background take up 90% of the screen height, make the footer 10%, and pin the footer to the bottom of the page:
//remove `footer`
.push {
height: 25px;
}
//set height to 90%;
#bkgcontainer {
width: 100%;
height: 90%;
position: relative;
margin: 0 auto -25px;
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
display: block;
}
//change height to 10%, change to fixed position, and set bottom to 0. Oh, set width, too.
footer{
height: 10%;
text-align: center;
margin: 0px auto;
background-color: white;
position: fixed;
bottom:0;
width:100%;
}
See this jsfiddle to see how it looks.
Here's a completely different solution. Note that it doesn't contain a modification of your code, however, it is an entirely different solution (out of several solutions) to get a header and a footer
HTML:
<header>
this is header
</header>
<div id="content">
hello
</div>
<footer>
this is footer
</footer>
CSS:
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
header {
width: 100%;
height: 60px;
background: green;
position: fixed;
top: 0;
}
#content {
width: 100%;
height: 100%;
background-image: url("http://cdn.wonderfulengineering.com/wp-content/uploads/2014/07/Beautiful-Wallpapers-7.jpg");
background-size: 100%;
}
footer {
width: 100%;
height: 60px;
background: blue;
position: fixed;
bottom: 0;
}
Here's the fiddle: http://jsfiddle.net/harshulpandav/7S4Xx/214/
You can try a position:fixed for footer class
footer{
text-align: center;
margin: 0px auto;
color: white;
position: fixed;
bottom:0;
width:100%
}
You should change the min-height value on the #wrapper to either a smaller percentage value or a minimum pixel value to allow for the footer to display. What you have done is tell the browser that you want that div to extend no less than the full screen.