I just finished my first page for a personal portfolio site. I am just a beginner when it comes to web development. I have set the width of my site to 1600 px, the same width of my background image.
What I wanted to do now is to convert the page to a responsive design. My only problem is that when I changed the width of the page to 100%, the position of my banner div is shifted to the left, instead of being in center.
here's a snippet of my code.
<body>
<div id="banner">
<div class="container_12">
<div class="grid_7 prefix_5" id="navbar">
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
<div class="grid_10" id="bannertext">
<h1>Hello!</h1>
<div class="clear"></div>
<p>Hi, I am Gelo Lopez, an emerging digital marketing and PR Professional. I create stories for brands. I am the social media primmadonna</>
<p id="bannerbutton"><img src="Assets/Images/bannerbutton.png" width="171" height="44" alt="Gelo Lopez Portfolio" /></p>
</div>
</div>
</div><!--end of banner-->
CSS:
body {
width: 100%;
color: #5a5959;
font-size: 18px;
font-family: "Lao UI";
}
/* sections*/
#banner {
background-image: url(../Images/Banner-background.png);
height:660px;
color: #fff;
font-size: 24px;
}
I am also using a 960 gs template for 12 columns. I decided to put the container_12 div under the id=banner in order to place the content in center of the page.
I hope somebody could help me
I think what you mean is that the background image is being cut off to the right, rather than the banner div being 'shifted to the right'. The <div> as a block level element will fit it's parent, in this case it's the body which is set to 100% width.
If you're happy using CSS3, try adding background-size: contain to #banner which will scale your background image to the content area.
More info here: http://www.w3schools.com/cssref/css3_pr_background-size.asp
JSFiddle here: http://jsfiddle.net/davidpauljunior/LCFun/
You'll need to play around with background-position CSS tag. You can try putting in the extra line of CSS Code:
background-position: top left;
Also, since you're talking about it being a responsive site, you'll probably be aware that your background may not fill a screen size which you didn't design for. You'll probably need to repeat the background, or fix it... it's really according to your needs. Read up on Background repeat here: http://www.w3schools.com/cssref/pr_background-repeat.asp
Related
I have a banner which contains a background image that I want to be responsive and appear the same on any device, that's why I have made background-size = 100% , but the problem is that a blank space at the top and the bottom of the background image appears that I want to remove, but without success. I have tried a lot of propositions in some other questions in relation with that, but It is not working. I am a beginner in CSS, can someone help me to find the perfect solution for a problem like that?
Bellow, you will find the code of my banner and 2 pictures explaining what I have got.
This is the banner's html code:
<div class="bannercontainer">
<div class="banner" data-fullscreen="on" data-auto="true" data-hidetimerbar="off" data-fullscreenoffsetcontainer=".header">
<ul>
<li data-transition="fade" data-slotamount="7" data-saveperformance="on" class="background" style="background-image: url(images/slider/test.png); background-size: 100%">
<div class="tp-caption sft large_bold_white" data-x="left" data-y="center" data-hoffset="500" data-voffset="-85" data-speed="700" data-start="700" data-easing="easeOutBack">Welcome</div>
<p class="tp-caption fade" data-x="left" data-y="center" data-hoffset="500" data-speed="500" data-start="900" data-easing="easeOutBack"></p>
Read More
</li>
</ul>
</div>
</div>
The first picture show the background image that fits perfectly
https://imgur.com/a/Koqvh0t
But in mobile device, I only want to remove the blank space
https://imgur.com/a/THMHj0P and keep the background image like that.
Thank you so much for your help.
what if you just set the height to 100% instead of the entire image:
height: 100%;
or you could just set the background to red so it doesn't look like blank space:
background-color: red;
Try the following CSS:
.bannercontainer .background{
background-size: cover;
}
This makes image fill in any empty spaces and trim the image when necessary.
Edit: Actually it looks like you're already using it. By the images it looks like your sizing of child elements e.g. .banner, <ul> or <li> is not 100% height. Use F12 to inspect elements. Hover over the elements to see their sizes on the page. The one that wraps only around the image probably needs to be set to position: absolute; height: 100%; width: 100%; margin:0; padding: 0;
I am working on a fluid layout (using all percentages and no pixels) and have a fixed heading (#heading) at the top of the page. I want all elements of the rest of the site to start at the bottom of the heading and not disappear under it as the user scrolls down.
I researched this problem, but the only solution I could find was to add padding to the top of the site's main content that is equal to the height of the heading. This solution was, to my knowledge, mostly applicable to pixels because they won't behave differently in different browser window sizes or resolutions.
I tried this, but the problem is that because I'm using percentages and not pixels, the solution doesn't work when the browser window is made smaller. When I shrink the browser window, the top of the main content still disappears under the heading. I'd be grateful for any pointers.
This is the browser window at normal size:
image1
This is the browser window decreased in size:
image2
HTML:
<div id="wrap">
<div id="heading">
<div id="name">
<img src="logo.svg" width=100%>
</div>
<div id="navbar">
HOME PORTFOLIO ABOUTCONTACT RESUME
</div>
</div>
<div id="site_content">
<div id="side_panel_portfolio">
Illustration<br>
Graphic Design <br>
Web Design
</div>
<div class="divider">
</div>
<div id="mygallery">
<!--(the images)-->
</div>
</div> <!--End of #site_content-->
</div> <!--End of #wrap-->
CSS:
body {height:100%;
font-family: 'Helvetica', sans-serif;
font-weight:lighter;
font-size:1.3vmax;}
#heading{height:14%;
width:100%;
font-family: 'Raleway', sans-serif;
font-weight:300;
background-color:#ffffff;
top:0;
padding-top:0;
padding-left:0;
Padding-right:0;
position:fixed;
z-index:100;}
#site_content{padding-top:6.7%;
z-index:99;
height:100%;}
#side_panel_portfolio{float:left;
padding-left:3%;
position:fixed;}
#mygallery{float:right;
width:79%;
padding-right:%;
padding-left:3%;}
#portfolio_start{padding-left:18%;}
.divider{position:fixed;
left:15%;
top:14.7%;
bottom:40%;
border-left:1px solid black;}
Basically, I want #site_content to start at the bottom of #heading and #mygallery to be the only div that can scroll.
Sorry for the long question!!
*Also just want to say that I'm using another artist's work as thumbnails purely for the development process as placeholders and that site is NOT online and will not be online with those images.
Use a div for the logo image to be responsive
#logo {
display:block;
width:100%;
}
<div id="logo">
<img src="logo.svg">
</div>
also do you have all current media queries in your css?
Device Specific CSS Media Queries Collection
I'm using Boostrap and I've set a background image to an empty div using the following markup and CSS:
<section id="process">
<div class="container"> <img src="img/production.png" id="processicon" class="center-block"> </div>
<!--end container-->
<div id="processbg"></div>
<div class="container">
<h2 class="text-center">materials and construction</h2>
<p class="text-center">The carbon neutral and responsibly sourced bamboo contributes to over 70% of the skis construction. The combined strength to weight ratio and consistency enables us to simplify and take a streamline approach to the skis construction.</p>
<p class="text-center">The search for the highest quality materials from around the globe has always been an essential role since day one.</p>
</div>
<!--end container-->
<img src="img/bigski.jpg" class="center-block bigski">
<div class="container text-center">
<h2 class="text-center more">read more</h2>
</div>
<!--end container-->
</section>
<!--end process-->
And:
#processbg {
background: url(../img/process.jpg) no-repeat center 110% fixed;
height: 602px;
background-size: 100%;
}
Everything looks good on desktops and tablets, but when viewed on mobile, the image gets really small and leaves big gaps around it. This makes sense, because the height of the empty div is always 602 px and the photo scales down when the viewport gets smaller. Is there a way to make the image non-responsive or is there some other solution to this?
Here's a link to the actual web page as well: http://skiest.ragne.me/. You can click the PROCESS link in the navigation and it takes you to the mentioned photo.
Thank you for your help.
I think you are looking for background-size: cover; which will:
Scale the background image to be as large as possible so that the
background area is completely covered by the background image. Some
parts of the background image may not be in view within the background
positioning area
source w3schools.com
Change your CSS to the following and see if that works for you.
#processbg {
background: url(../img/process.jpg) no-repeat center 110% fixed;
height: 602px;
background-size: cover;
}
Alternatively you could just remove the background-size declaration and see if that gives you the desired result. The default is auto which should leave the image at its normal size.
I am working on a site that uses the 960 grid system. It has an issue with the navigation. Rather then try to explain, I'll show you a picture of what I'm going for
I figured the best way to do this would be to have a DIV called navHolder that stretches the whole way across the screen. Inside navHolder is a div with a class of container the hold it in the 960 system. I would give navHolder a top and bottom border to achieve the effect.
Here is the HTML
<div id="navHolder">
<div class="container_12">
<div class="grid_4" id="leftNav">
<ul class="leftNav">
<li>About Us</li>
<li>ABG Way</li>
</ul>
</div>
<div class="grid_4" id="logo">
<img src="images/abg_website_logo_2014.jpg" alt="abgLogo" id="mainLogo"/>
</div>
<div class="grid_4" id="rightNav">
<ul class="rightNav">
<li>Portfolio</li>
<li>Media</li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
The issue is that the image forces navHolder to become large, so the top and bottom border lose the desired effect.
Here is a screenshot of the image making it too large
Screenshot
I attempted to give the image an
position:absolute
to stop it from resizing the div. This works, however, this causes the navigation options to collapse behind it.
Here is a screenshot
I attempted to create a fiddle to recreate this scenario
Fiddle
But its not quite the same.
My question is then, is there a way to set this image so that it doesnt resize its containing DIV AND still holds its place with the navigation so its on both sides of the image? Is there a better way to go about this then what I am currently doing?
I'd give the container <div> desired size and set the image as it's background without repeat instead of using an <img>, and apply background-size: 100%;
Look into more CSS Background Properties # MDN
I would go about this by overriding the gird (only for nav).
so it would be
#navHolder .grid_4
{
float:none;
display:inline-block;
vertical-align:middle;
}
You would also need to offset the random white space display:inline-block gives so set the font size of the parent wrapper in this case #navHolder font-size:0;
#navHolder
{
font-size:0px;
}
here is your fiddle with my changes
http://jsfiddle.net/bCzK5/4/
I am working on this project: http://www.e-pedkelnes.beta.verskis.lt/
Actually what I have to do is to put a background without adding a class. The background has to be white with extensions for the menu and the footer element. It would be easy if it would be only an extension for the menu. Content is of different size and size depends on the elements in the screen. so, it is easy to put a background for the menu, but footer background will always be in a different position just because of the different sizing of the content. If you understood what I mean :), I would be grateful to get some help.
Within:
.foot-outer {
background: none repeat scroll 0 0 #E8E4E5;
border-top: medium none !important;
left: 2px;
padding-top: 15px;
}
I removed width and margin and that looked better. You should not have them set on the outer elements, only on the container elements.
Does that make sense?
EDIT:
Your HTML layout should be more like
<div class='header wrapper'>
<div class='header'>
</div>
</div>
<div class='content wrapper'>
<div class='content'>
</div>
</div>
<div class='footer wrapper'>
<div class='footer'>
</div>
</div>
Then apply backgrounds to the wrapper divs, and apply a centred width to the inner content divs.