Full Width Background with Fixed Width Content (CSS)

Learn how to mix full width background containers with fixed width content containers. Check out my “Get a Developer Job” course:

Have you created amazing pages with HTML & CSS and want to move them from your computer’s hard drive to online so the world can see them? The next step is to move your files to a web host. Learn about web hosts, my favorite hosting company, and how to save $40 on the only hosting plan you’ll need:

Sign up for my newsletter to receive periodic webDev tips, tricks, resources and coupons. Join the list at

Follow LearnWebCode on Twitter for resources and updates:






23 responses to “Full Width Background with Fixed Width Content (CSS)”

  1. AT Man Avatar

    that's what i am looking for, thanks a lot (y)

  2. Dinosawer Gweaver Avatar

    can you do this with css grids?

  3. Deximilijan Malic Avatar

    Thanks Brad ,yours tutorials its one of the best ! I do like this ,but I put in <p> ,and also works ! Like this:
    <p class="inner" … Thanks again and keep up with good work!

  4. Rupesh Vaingankar Avatar

    Vry nice n simple to understand tutorial Focus on specific topic .. Love it .. Thanks alot .. 🙂

  5. MuscleSkills Avatar

    Do you have any video showing header and footer in width-min:100% . I would like to learn how to do it

  6. Rina White Avatar

    I have been trying to find out what all the different web layouts are called.  In music we have many genres and subgenres.  You couldn't say this was an advanced grid layout, for example.  I am sure with all the different layout techniques/methods that they must have names assigned to them.  What is this style of website called?

  7. Георги Георгиев Avatar

    Thank you for the lesson.

    GOD bless you.

  8. Saoj1981 Avatar

    My divs can't seem to cover the full width of my browser. Is there a code you're using that I'm not seeing in this video?

  9. mohammed nasrallah Avatar

    Great! Very helpful!

  10. Abdullah Alemadi Avatar

    Y not just give some padding right and left ?

  11. Ayomide Onalaja Avatar

    Great! Very helpful!

  12. 3van5 Avatar

    do u hv a tut on how make just a full width background? I think it'd be nice to add ur tut resource too. thnx

  13. polas anderson Avatar

    This one is good to use too.

    #intro{position:relative; with: 500px;} and stay in it's place as you showed in the video 😉

  14. NenadSSS Avatar

    thanks again, maybe at the start of your tutorials you could say your first name, like "Hello everyone, Jake-John-Alexander here and today we will learn how to…"
    just a suggestion, it is kind of weird to call you  "LearnWebode" 😀

  15. Игор Ташевски Avatar

    Does this technique can work somehow if you put background image in the div also full width and the background to be responsive?

  16. M. Francis Avatar

    Definitely learned something. Thanks!

  17. Redd Vlogs Avatar

    Super helpful! Thank You! 🙂

  18. scream198 Avatar

    Hey! I recently discovered your channel and saw a few of your tutorials and they're great. Thanks.

    About this example, I was wondering if you couldn't just give a class name to the p tag and set the width and the margin to it in the CSS instead of creating the divs? Or is there any downside to that? Also, if I'm saying something very wrong, cut me some slack because I started HTML and CSS very recently eheh.

  19. rosy bosy Avatar

    thanks. its very nice

  20. Kazbaran EmBe Avatar

    Do you know Javascript? because if you do I would love a tutorial

  21. Paul Elksnis Avatar

    Very interesting! Looking forward to seeing the next videos you mentioned 🙂 Thanks!

  22. MickJnr7 Avatar

    Yeah, i only have a pretty basic understanding of this. Please do this 🙂

  23. Ziyo Shams Avatar

    Good job dude. If you could explain clearfix in details that would be awesome.

Leave a Reply

Your email address will not be published. Required fields are marked *