Repeat Top Background

Question

Repeat Top Background

I am currently in the process of converting this design into HTML & CSS code.

I am facing a challenge when it comes to repeating the background on the top section since the left and right parts do not use the same image file.

Even after attempting to use this technique, I was unable to achieve the desired result.

My goal is to repeat these images and have the header in the middle (header.jpg):

top-left: https://i.sstatic.net/vcuph.jpg
top-right: https://i.sstatic.net/ruG9M.jpg

I also experimented with background-position, but unfortunately, it did not solve the issue.

Any suggestions from my fellow developers?

Thank you for your help.

html css

Answer 1

Answer №1

Are you looking for help on implementing a specific layout? If so, here's an example that might be what you need:
http://jsfiddle.net/ub66M/1/

Here is a snippet of the HTML code:

<div id="page">
  <div id="header-wrapper">
    <div id="header-left"><!-- empty, just for background --></div>
    <div id="header-right"><!-- empty, just for background --></div>
    <div id="header-center">
        the actual content of the header comes here
    </div>
  </div>
</div>

And this is how the CSS looks like:

#header-wrapper {
    width: 100%;
    position: relative;
}
#header-left, #header-right {
    width: 50%;
    position: absolute;
    top: 0;
    background-repeat: repeat-x;
    height: 284px;
    z-index: -1;
}
#header-left {
  left: 0;
  background-image: url(http://i.imgur.com/tcr1F.jpg);
}
#header-right {
  left: 50%; 
  background-image: url(http://i.imgur.com/PchTG.jpg);
}
#header-center {
    width: 500px; /* adapt to actual width of center slice */
    height: 284px;
    margin: 0 auto;
    background: url(http://placehold.it/500x284) no-repeat; /* put your center slice here */
}

To achieve this layout, you need to add two extra divs positioned behind the header content. Make sure the center div contains the correct image slice and the actual header content.

I hope this explanation is clear and helps you with your query!

Answer 2

Are you looking for help on implementing a specific layout? If so, here's an example that might be what you need:
http://jsfiddle.net/ub66M/1/

Here is a snippet of the HTML code:

<div id="page">
  <div id="header-wrapper">
    <div id="header-left"><!-- empty, just for background --></div>
    <div id="header-right"><!-- empty, just for background --></div>
    <div id="header-center">
        the actual content of the header comes here
    </div>
  </div>
</div>

And this is how the CSS looks like:

#header-wrapper {
    width: 100%;
    position: relative;
}
#header-left, #header-right {
    width: 50%;
    position: absolute;
    top: 0;
    background-repeat: repeat-x;
    height: 284px;
    z-index: -1;
}
#header-left {
  left: 0;
  background-image: url(http://i.imgur.com/tcr1F.jpg);
}
#header-right {
  left: 50%; 
  background-image: url(http://i.imgur.com/PchTG.jpg);
}
#header-center {
    width: 500px; /* adapt to actual width of center slice */
    height: 284px;
    margin: 0 auto;
    background: url(http://placehold.it/500x284) no-repeat; /* put your center slice here */
}

To achieve this layout, you need to add two extra divs positioned behind the header content. Make sure the center div contains the correct image slice and the actual header content.

I hope this explanation is clear and helps you with your query!

Answer 3

Answer №2

Maybe it would be more effective to duplicate the background and make it the background of the wrapping <div class="wrapper"> that contains all the website content, or a similar approach... and make a bigger cut, not just 1 pixel in height, but around 50-60 pixels

Answer 4

Maybe it would be more effective to duplicate the background and make it the background of the wrapping <div class="wrapper"> that contains all the website content, or a similar approach... and make a bigger cut, not just 1 pixel in height, but around 50-60 pixels

Answer 5

Answer №3

In creating this design, my approach would involve extracting a horizontal portion (approximately 15-20 pixels) from the gradient background transitioning from pink to orange. I would then set this section to repeat vertically on the <body> element. The pink borders framing the main content seem to serve the purpose of defining the top and bottom boundaries, adding a subtle touch of color to the overall layout.

Answer 6

In creating this design, my approach would involve extracting a horizontal portion (approximately 15-20 pixels) from the gradient background transitioning from pink to orange. I would then set this section to repeat vertically on the <body> element. The pink borders framing the main content seem to serve the purpose of defining the top and bottom boundaries, adding a subtle touch of color to the overall layout.

Answer 7

Answer №4

The header cannot be accurately depicted with the two images provided as the gradient is neither horizontal nor vertical, but diagonal. To achieve this effect, CSS gradients can be used easily.

http://jsfiddle.net/ZteRf/

background: -moz-linear-gradient(-45deg, #ff3232 0%, #fff989 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#ff3232), color-stop(100%,#fff989)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #ff3232 0%,#fff989 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #ff3232 0%,#fff989 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #ff3232 0%,#fff989 100%); /* IE10+ */
background: linear-gradient(135deg, #ff3232 0%,#fff989 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3232', endColorstr='#fff989',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

Answer 8

The header cannot be accurately depicted with the two images provided as the gradient is neither horizontal nor vertical, but diagonal. To achieve this effect, CSS gradients can be used easily.

http://jsfiddle.net/ZteRf/

background: -moz-linear-gradient(-45deg, #ff3232 0%, #fff989 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#ff3232), color-stop(100%,#fff989)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #ff3232 0%,#fff989 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #ff3232 0%,#fff989 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #ff3232 0%,#fff989 100%); /* IE10+ */
background: linear-gradient(135deg, #ff3232 0%,#fff989 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3232', endColorstr='#fff989',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

Answer 9

Answer №5

Make sure to add this snippet to your CSS file

   body
   {
   background-image:url("http://example.com/background.jpg");
   background-repeat:repeat-y;
   }

For a live demonstration, visit http://example.com/demo (Drag the slider between javascript and result to see the full image)

Best of luck! :)

Answer 10

Make sure to add this snippet to your CSS file

   body
   {
   background-image:url("http://example.com/background.jpg");
   background-repeat:repeat-y;
   }

For a live demonstration, visit http://example.com/demo (Drag the slider between javascript and result to see the full image)

Best of luck! :)

Repeat Top Background

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Has anybody dabbled with Indexed DB before?

Show and hide the div by clicking a button

What methods can users employ to effectively manage and maintain their in-app purchases using my application?

Locating items based on checkboxes and dropdown selection

What is the best way to ensure that a div containing lengthy text wraps to the next line as if it were only text overflow?

The jQuery scripts are having trouble cooperating

Issue with aligning CSS in Internet Explorer 7

Unusual css glitch observed when hovering over a span/link

Adjusting Screen Size for Lottie Animation in React.js

The image in drag and drop ghost preview is not appearing on Firefox

Tips for pressing the enter key to submit when faced with two buttons

Adjusting Column Placement in Bootstrap Grid System

Automated scrolling effect within a container element

Could Google Adsense be causing issues with my website's navigation bar?

Show a PDF document on the webpage by making an ajax request in a C# MVC application

Adjusting the spacing between characters in SVG text elements

My divs are multiplying twice as fast with every iteration of the Javascript For Loop

What methods can I use to minimize the gap between images within the <figure> element?

Selecting a filter for an array of objects

Having difficulty changing the background color to black for the parent div that houses multiple child divs