I bought a theme in envatomarket and here is the link. Now I have a problem with the background banner. Here is what it looks like:
As you can see, the background of the banner is like a collage of pictures and it is cropped according to the size of screen but the original image is here. Since it is bootstrap, the image will resize according to the size of the screen. But what if I want to show the full image in the background as it is the link? Here are the codes:
HTML:
<div class="wrapper">
<section class="banner-bg">
//more html
</section>
</div>
CSS:
.wrapper {
max-width:100%;
}
.banner-bg {
background:url(../images/main-bg.jpg) no-repeat top center;
position: relative;
text-align: center;
}
Is there a way that whatever the size of the screen is, the full image will still be visible and not like of the screenshot above? Thank you.
Try adding:
background-size:100 100;
Related
I'm doing a site for my uncle and I have a slight issue. When I visit it on a mobile, the Logo, site title, and navigation bar are all mushed together.
Here's what it looks like here.
How can I change this in CSS? I've looked all over, and I didn't find any answers. I've tried changing the #Media CSS part on style.css
You could try doing:
margin: 20px;
That should create a gap between the logo and the title should be farther apart. Also if you could include some code in your posts that would be great.
Since the site is currently down and there is no code what so ever, I can at least help you out with how to apply media queries.
#media (max-width: 480px) {
.<yourimg>: <your styling>;
}
This will allow whatever you are styling to be applied on screen that are LESS than 480px wide. You are obviously allowed to put in the desired width you want. This is but an example :)
You can read all about media queries here
Hope this helped a bit :)
// Marc Hjorth
i use this:
<div class="col m12 s12 l8 offset-l2"> </div>
which sets the width of the div based on the size of the screen viewing it, making it easy to design a mobile site without having to design two separate sites.
for example, i'd make a container around certain area, set it as a row with a div and then use columns which change based on screen size
<div class="sections-container">
<section id="our-vision" class="section">
<div class="row">
<a name="our-vision"></a>
<div class="col m12 s12 l8 offset-l2">
</div>
</div>
</section>
</div>
I had quick look at the website.
There is an issue with an empty side bar that pushes the navigation down.
The sidebar with the following id:
id="sidebar-header"
You should try to disable the sidebar in your theme if you don't need it.
or you can add a simple css rule to your stylesheet to not display it:
#sidebar-header { display: none; }
to move the mobile menu you can edit this style rule in style.css on line 2795:
#screen and (max-width: 760) {
...
#access {
position: absolute;
top: 0;
left: 0;
z-index: 3;
width: 100%;
padding: 0;
background: none;
box-shadow: none;
}
...
}
Edit the top and left properties there (add some pixel values like: top: 70px; for example)
I hope this helps.
I would like to make a background image for one of my images. The background image is transparent and can be seen at http://webmaster.tsaprotectandserve.com/new_design/images/view_site.png (and I'm pretty sure I have the correct url relative to the document in the code) and the idea is just that one you hover over the images, you can see the view site background image. Before I move the background image to a hover class and center it on the image, I wanted to make sure it works properly just as a background image but it isn't showing up.
My code is
<img style="float: left; margin-bottom: 20px; background-image: url(images/view_site.png)" src="images/white_house_website.PNG" width="490" height="231" alt="White House Website">
My website with the issue is here and the image with the problem can be found if you scroll all the way to the bottom. It is the white house image.
u can view my working solution in jsfiddle:
http://jsfiddle.net/avi_sagi/Ea78j/3/
CSS Rules
.thumb{
width:490px;
height:231px;
background:url('images/view_site.png') no-repeat center;
background-size:100%;
}
.thumb:hover .view_site{
width:490px;
height:231px;
background:url('images/white_house_website.PNG') no-repeat center;
background-size:128px 128px;
}
if your css is in external stylesheets remember to change the url of the background image or mention absolute url to be safe.
HTML
<div class="thumb">
<div class="view_site"></div>
</div>
It is actually working. the image is covering up the "Veiw Site" image.
Because its the background.
i removed the top image via google chrome...
What you want to do is set the "View Site" image as separate div as child of a div around the image.
and set it to appear on hover.
something like
http://jsfiddle.net/hWcMK/
CSS:
.imagebox:hover .viewsite{
display:block;
}
.viewsite{
width:125px;
height:125px;
background-image: url("http://webmaster.tsaprotectandserve.com/new_design/images/view_site.png");
margin-top:-150px;
position:absolute;
display:none;
}
and the HTML:
<div class="imagebox">
<img src="http://webmaster.tsaprotectandserve.com/new_design/images/abc_website.PNG" width="80%"/ >
<div class="viewsite"></div>
</div>
I set background image in #section-content, background is repeat-x, and background color in #section-footer. Problem is that backgrounds are cut by the amount of space that is first seen.
Is there any way to fix this?
There is image with problem, you can see that footer background color is cut off when is resolution or window small and I scroll right...
Problem image
You need to define min-width to the footer. Consider your main page wrapper has width: 980px; then assign min-width: 980px; to the footer element. When you resize the browser window, your footer knows that he has to repeat the background to the specified min-width even when your page gets horizontal scroll.
my html structure looks like this
<div id="page">
<div id="section-header">
...
</div>
<div id="section-content">
...
</div>
<div id="section-footer">
...
</div>
</div>
so I add to css
#page {
margin: auto;
overflow: hidden;
min-width: 1180px; /* it fits on my site */
}
and problem is solved...
I'm trying to get the CSS for a Pin Style right. I'm trying to get the exact Pinterest Pin Style, that means that the image is filling the container/box and below there are the stats...
The Image below shows a Pinterest Pin that i'm trying to make. Does anyone know the Css that is required for the image to Fill the container/box ?
Thank you
You just need to make sure your image is the same width as its container element. Set the width on your container to the same width as your image and make sure there is no padding in your container or margins on the top or sides of your image.
<div class="container">
<img width="200">
<div class="meta">
text
</div>
</div>
.container { width: 200px; padding: 0; }
.container img { margin: 0; }
Pinterest's code gets a bit more complex but you can always use an inspector to see what they're doing specifically.
I have a site that has a fairly complicated footer, see http://www.roadsafetyforchildren.co.uk/, not really sure how to attempt to build it:
I've split the image up into two parts, the first part below needs to be horizontally centered but sit below the content:
The second part needs to repeat horizontally but stay in line with the image above.
Therefore the two images needs to look like the first image at the top of the question.
I can match the two images up IF the content div above it has a fixed height. The problem is the content div NEEDS to be flexible to grow/shrink with the content. Therefore the image at the bottom of the content div moves up and down the page depending on the size of it.
How can I keep the two images lined up with a flexible content div above it?
P.s There's a lot of answers but don't think a few of them have understood the question.
Seems straight forward to me, you will need two divs:
<div id="content">
<div id="inner_content">
<!-- Append image to very bottom -->
<img src="city" width="" height="" alt="" />
</div>
<!-- Background image of hills goes here -->
</div>
CSS is straight forward..
#content { width: 100%; background: url('hills.png') repeat center bottom; }
#inner_content { width: xx; margin: auto; }
try this:
html, body { margin:0; padding:0; min-height:100%;}
html { background: #color url(repeteable.jpg) center bottom repeat-x; }
body { background: white url(footer.jpg) center bottom no-repeat;}
Whatever <div> the content is in should be height:auto and have a background image of five or so pixels high by whatever width and should repeat-y in the css, and the <div class="footer"> should be float:left. That way the footer will always be below the content, and whatever height the content is will have a repeating background.
No need to mess with PS, except to create the bg image for the content.
This would be the bg image for content div, and repeat-y so it repeats from the top down:
And the footer image:
And if you make the 'background repeat' image a png, you could make the drop shadow opaque to accommodate the change in the body bg image.
You can position a background inside an element:
div#footer {
background: url('roadpic.jpg') bottom center no-repeat;
}
<div id="content">your content goes here</div>
<div id="footer">...</div>
which will keep the footer div below the content at all times.
You will need a common anchor point for both the backgrounds. Between a horizontally-resizable window and a content area that is less than 100% of the window width, the only point that can remain constant between the two containers is the horizontal centre of the body.
So your hills background will need to be centred on the body or some other container that has 100% of window width. The road image can either be fixed-position inside a fixed-width centred container (shown in the example below), or centred inside a centred variable-width container.
The resulting CSS will be something like this:
div#wrapper {
width: 100%;
background: url(hills.jpg) center bottom repeat-x #fff;
}
div#content {
width: 800px;
margin: 0 auto;
/* background can be offset to the left or right if the width is fixed
if not it must be centred */
background: url(road.png) right bottom no-repeat;
}
And the HTML:
<body>
<div id="wrapper">
<div id="content">
<p>Some content here</p>
</div> <!-- content -->
</div> <!-- wrapper -->
</body>
The backgrounds of both the containers will have same anchor point and they'll move together as the window is resized!
Because #content is a child of #wrapper, they'll remain aligned vertically because #wrapper will get taller as #content gets taller (unless #content is a float, in which case you'll have to use the :after clearing trick; or if #content is position:absolute, you'll need to align them manually or with javascript).