Applet Orchard

Full Width Background with Fixed Width Content (CSS)

[ad_1]
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:

Posted

in

by

appletorchard

Tags:

Comments

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

  1. AT Man Avatar
    AT Man

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

    Reply
  2. Dinosawer Gweaver Avatar
    Dinosawer Gweaver

    can you do this with css grids?

    Reply
  3. Deximilijan Malic Avatar
    Deximilijan Malic

    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!

    Reply
  4. Rupesh Vaingankar Avatar
    Rupesh Vaingankar

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

    Reply
  5. MuscleSkills Avatar
    MuscleSkills

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

    Reply
  6. Rina White Avatar
    Rina White

    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?

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

    Thank you for the lesson.

    GOD bless you.

    Reply
  8. Saoj1981 Avatar
    Saoj1981

    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?

    Reply
  9. mohammed nasrallah Avatar
    mohammed nasrallah

    Great! Very helpful!

    Reply
  10. Abdullah Alemadi Avatar
    Abdullah Alemadi

    Y not just give some padding right and left ?

    Reply
  11. Ayomide Onalaja Avatar
    Ayomide Onalaja

    Great! Very helpful!

    Reply
  12. 3van5 Avatar
    3van5

    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

    Reply
  13. polas anderson Avatar
    polas anderson

    This one is good to use too.

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

    Reply
  14. NenadSSS Avatar
    NenadSSS

    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" 😀

    Reply
  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?

    Reply
  16. M. Francis Avatar
    M. Francis

    Definitely learned something. Thanks!

    Reply
  17. Redd Vlogs Avatar
    Redd Vlogs

    Super helpful! Thank You! 🙂

    Reply
  18. scream198 Avatar
    scream198

    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.

    Reply
  19. rosy bosy Avatar
    rosy bosy

    thanks. its very nice

    Reply
  20. Kazbaran EmBe Avatar
    Kazbaran EmBe

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

    Reply
  21. Paul Elksnis Avatar
    Paul Elksnis

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

    Reply
  22. MickJnr7 Avatar
    MickJnr7

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

    Reply
  23. Ziyo Shams Avatar
    Ziyo Shams

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

    Reply

Leave a Reply

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