Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 10 of 10
Like Tree3Likes
  • 3 Post By Ronald Roe

Thread: HTML/CSS - Background Image Cutting off. Container Issue

  1. #1
    Junior Member
    Join Date
    Dec 2014
    Posts
    9
    Member #
    40990

    HTML/CSS - Background Image Cutting off. Container Issue

    Ive included some images of the website front end, css, html, and the background image. So where the words say "Mood Enhancing Teas" I was wanting to have a ribbon as the background and have the text center ini front of it. It seems to be cutting off the right side, I was guessing the container wasnt big enough but there arent any dimensions for the H2 text. Not sure why its doing that or how to fix.

    Also the grey box or container behind the tea cup image and text I would like to increase the width about 200 more pixels. I want it to increase 100 pixels on each side equally but when I increase the width by 200 pixels it only increases on the right side.

    Help would be greatly appreciated. Thanks guys.


    I was able to upload to Weebly so you can see it live.

  2.  

  3. #2
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Change
    Code:
    background-image: url("theme/ribbon.jpg?1417934926");
    to
    Code:
    background: url("theme/ribbon.jpg?1417934926") no-repeat center center;
    background-size:cover;
    text-align:center;
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  4. #3
    Junior Member
    Join Date
    Dec 2014
    Posts
    9
    Member #
    40990
    OMG I could kiss you. Thank you so much. Now for the second issue, the container, the grey one. I wanted to increase the width but when I do it just increase the right side. Do you know how I would increase the container 100 pixels on both side, or at least increase the width and then center it again?

  5. #4
    Junior Member
    Join Date
    Dec 2014
    Posts
    9
    Member #
    40990
    This is what happens when I increase the width of the container. It only increase the right side but moves tthe text to the right and centers the text instead of having it justified to the right. Im assuming that I would have to have it float right inherent of the cup of tea image? How would I go about achieving those two? Thank you!

    I tried doing margin-right:auto and margin-left:auto and that didnt work.
    Last edited by rakoom2002; Dec 07th, 2014 at 12:37 PM.

  6. #5
    Junior Member
    Join Date
    Dec 2014
    Posts
    9
    Member #
    40990
    Quote Originally Posted by rakoom2002 View Post
    This is what happens when I increase the width of the container. It only increase the right side but moves tthe text to the right and centers the text instead of having it justified to the right. Im assuming that I would have to have it float right inherent of the cup of tea image? How would I go about achieving those two? Thank you!

    I tried doing margin-right:auto and margin-left:auto and that didnt work.
    forgot to post the image here it is

  7. #6
    Senior Member Vapr_Arts's Avatar
    Join Date
    Oct 2013
    Location
    California
    Posts
    1,930
    Member #
    37412
    Liked
    544 times
    Just make the max-width:100%; for the image


    Regretfully sent from my iPhone using Tapatalk during lunch and other breaks

  8. #7
    Junior Member
    Join Date
    Dec 2014
    Posts
    9
    Member #
    40990
    Didnt do anything. Youre talking about the grey container right? I already got the banner to work with the first guys advice.

  9. #8
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    I would normally not suggest this ever, but it's easier than recoding the entire thing. Whatever amount you increase the width by, apply a negative left margin of half that amount.

    So, it's at 900px now. Let's say you up it to 1000px. You'd set margin-left:-50px;
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  10. #9
    Senior Member Vapr_Arts's Avatar
    Join Date
    Oct 2013
    Location
    California
    Posts
    1,930
    Member #
    37412
    Liked
    544 times
    It seems to work on Safari for me? What browser are you using? Whatever you have now seems to look good on my end.

    Sorry about my previous comment. I misunderstood what was going on.

  11. #10
    Junior Member
    Join Date
    Dec 2014
    Posts
    9
    Member #
    40990
    Quote Originally Posted by Ronald Roe View Post
    I would normally not suggest this ever, but it's easier than recoding the entire thing. Whatever amount you increase the width by, apply a negative left margin of half that amount.

    So, it's at 900px now. Let's say you up it to 1000px. You'd set margin-left:-50px;
    OMG you rock. Youre awesome, thank you soooooooo much for all of your help.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Search tags for this page

html background image cut off

Click on a term to search for related topics.
All times are GMT -6. The time now is 03:58 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com