3

I'm trying to place an image in my website behind everything that's in my header and a little more, but there's a problem with doing that. I've tried placing the image like this:

body {
  background-image:url('images/city.jpg');
  background-position: top;
  background-size: cover;
  height: 500px;
}

But the result is in this screenshot.

There's always a problem with the 'SMS MESSAGING MADE EASY' part, either the image pushes it down or it doesn't allow the image to extend above it.

This is the HTML for the "SMS..." text:

<h1 class="n1">
  <font face="ralewaybold">
    SMS MESSAGING MADE EASY
  </font>
</h1>

And the CSS:

.n1 { 
  display: flex; 
  justify-content: center; 
  margin-top: 10em;
}

The whole page screenshot: The whole page screenshot

I want the image to reach the top of the page - https://prnt.sc/qh4foe

Cubex
  • 39
  • 9
  • Please, post css and html for 'SMS MESSAGING MADE EASY'? – Morticia A. Addams Dec 29 '19 at 12:04
  • Hi, you are limiting the body height to 500px. Try with percentage like the whole height give it a value100%. Also the margin:0px . Try this and see. Please specify what device you are using ( what browser device such as iphone, desktop or anroid ) and what browser ( safari, chrome, firefox ..) – Alan M Dec 29 '19 at 12:05
  • @MorticiaA.Addams `code`

    SMS MESSAGING MADE EASY

    `code`.n1 { display: flex; justify-content: center; margin-top: 10em;} `code`     – Cubex Dec 29 '19 at 12:11
  • @AlanM When I try to extend it, it just extends downwards, it doesn't go over the SMS MESSAGING MADE EASY text. I'm using chrome. – Cubex Dec 29 '19 at 12:14
  • 1
    You can try to use this to cover the whole page: body { background-image:url('images/city.jpg'); background-position: top; background-size: cover; min-width: 100%; max-width: 100%; } – Poszer Dec 29 '19 at 12:32
  • @Poszer Still no result, it just extends downwards all the way until the end of the page. Screenshot of the whole page, minimized - [link]https://imgur.com/a/iHuNMnu – Cubex Dec 29 '19 at 12:38
  • 1
    @Cubex Try to set this please: min-height: 100%; margin: 0 auto; min-width: 100%; max-width: 100%; background: url('images/city.jpg') You want something like this, right ? https://prnt.sc/qh4ehn – Poszer Dec 29 '19 at 12:51
  • @Poszer Still the same old problem. I want the image to reach the top of the page and then edit the image how I want - gradient etc. I want it to be like this - https://prnt.sc/qh4foe But for some weird reason, the image just doesn't go above the 'SMS MESSAGING MADE EASY' text. – Cubex Dec 29 '19 at 12:57
  • 1
    Ok, let's try than like this @Cubex: body { background-image: url(images/city.jpg); background-position: center center; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; } And also add this css: body { background: url(images/city.jpg) center center cover no-repeat fixed; } – Poszer Dec 29 '19 at 13:14
  • @Poszer Still the same problem. https://prnt.sc/qh4lr7 - It seems that it only covers the part where the paragraphs are and the first header. The margin shouldn't effect it, right? – Cubex Dec 29 '19 at 13:19
  • 1
    One more try, try to change background-size:cover; to background-size:100% 100%; @Cubex – Poszer Dec 29 '19 at 13:25
  • 1
    When you delete 'SMS MESSAGING MADE EASY' is background ok? I try simple code and it's ok. Maybe problem is from another part of css. My test: https://www.w3schools.com/code/tryit.asp?filename=GADX6YF9V8IP – Morticia A. Addams Dec 29 '19 at 13:36
  • 1
    @Poszer Ok, wait. Apparently, the margin was the problem, but now there's another problem - How do I make the image so it covers up the little white edges - https://prnt.sc/qh4rf6 at the top, left, right. – Cubex Dec 29 '19 at 13:37
  • @MorticiaA.Addams For some reason, the margin of the SMS.. text was the problem. – Cubex Dec 29 '19 at 13:38
  • 1
    @Cubex Setting the body's margin to 0 might fix that problem: body { margin: 0px; } – Poszer Dec 29 '19 at 13:39
  • Nice, glad to help you @Cubex – Poszer Dec 29 '19 at 13:51
  • @Poszer Sorry, but I've got another problem. For some reason when I change the image opacity, the text opacity which is below the image changes too. https://prnt.sc/qh4z9c As if the image and the content is somehow linked. – Cubex Dec 29 '19 at 14:00
  • Take your image into an image editor, turn down the opacity, save it as a .png and use that instead. @Cubex – Poszer Dec 29 '19 at 14:14

0 Answers0