CODEWITHSUNDEEP
htmlcss
oneman
oneman

Reputation: 811

Can someone explain the code behind the marked area on this website?

I am trying to figure out how to add a background that extends to the edges of the page no matter what the size, like on the website here http://www.wisemanpanel.co.nz/

And I'm talking about this particular area that is highlighted in green enter image description here

I've been looking at the source code and I can't find anything specifically for that part, also have tried right click -> inspect but still didn't find much, perhaps I have poor research skills.

I would just like a basic example of what the html/css would look like please if anyone could provide it?

Upvotes: 0

Views: 55

Answers (2)

Mouradif
Mouradif

Reputation: 2694

If you inspect their code, you will see that their <body> has a background-image that is 10px (but could have also been 1px) wide and that repeats horizontally :

http://www.wisemanpanel.co.nz/uploads/images/bg_repeat.png

It's an old trick I have used a lot too. Consider this very simple jsfiddle using the very same image :

HTML:

<div id="content">
  <div id="top">
    TOP BAR
  </div>

  <div id="middle">
    Content !!
  </div>
</div>

CSS:

#top {
  height: 50px;
  line-height: 50px;
  background: yellow;
  width: 70%;
  margin: 0 auto;
  text-align: center;
  padding: 20px;
}

#content {
  width: 100%;
  background: url("http://www.wisemanpanel.co.nz/uploads/images/bg_repeat.png") repeat-x;
}

#middle {
  width: 70%;
  margin: 0 auto;
  height: 600px;
  background: #fff;
  text-align: center;
  padding: 20px;
}

Upvotes: 0

alfredopacino
alfredopacino

Reputation: 3241

It's simply a background image applied to the tag <body> which repeats horizontally (background-repeat: repeat-x;)

Just right click->inspect-> body tag and you will see :)

Upvotes: 2

Related Questions