CODEWITHSUNDEEP
cssimagetwitter-bootstrapresponsive-design
0xPingo
0xPingo

Reputation: 2197

Responsive Background Image - Fullscreen

I am making a simple landing page and am trying to get the following image to be the background fullscreen: image

My CSS currently looks like this:

body {
    background-image: url('/images/bg.jpeg');
    width: 100%;
    height: 100%;
    position: fixed;
}

A majority of the image is getting cut off, what's the best way to remedy this?

Thanks !

Upvotes: 0

Views: 1312

Answers (2)

Michael Barreiro
Michael Barreiro

Reputation: 328

Heres a cool idea for a landing page. The background, being fixed is a popular cool way for landing pages. Please, to see this properly, click "Full Page" on the top right after clicking run code snippet.

@import url(https://fonts.googleapis.com/css?family=Lato:300);

div:nth-child(1){
  background-image: url(https://images.unsplash.com/photo-1431538510849-b719825bf08b?q=80&fm=jpg&s=6fd7a983e3b43e66d2b6062856b9df66);
  height: 750px;
  width: 100%;
  background-size: cover;
  background-attachment: fixed;
  
}

div:nth-child(2){
  height:400px;
  width: 100%;
  background-color: black;
  z-index: 1;
}

h1{
  text-align: center;
  color: white;
  background-attachment: fixed;
  font-family: 'Lato', sans-serif;
  padding-top: 300px;
  z-index: 0;
  text-shadow: 0 0 2px black;
  font-size: 50px;
  }
<div>
  <h1> Michael Barreiro </h1>
</div>

<div></div>

Upvotes: 1

GeoffreyHervet
GeoffreyHervet

Reputation: 288

Did you tried this :

body {
  margin:0;
  padding:0;
  background: url('/images/bg.jpeg') no-repeat center fixed; 
  -webkit-background-size: cover;
  background-size: cover;
}

Upvotes: 4

Related Questions