would appreciate any insight to my issue. I'm trying to use the same image for placeholder purposes and I need it three times but when I link it via css it only appears twice correctly and I have no idea why it won't appear the third time.
Here is the HTML snip:
<div class="container">
<div class="row">
<div class="span4">
<h5>Get in Touch?</h5>
<h3>Add Me</h3>
</div>
<div class="span4">
<h5>Hire for a Project?</h5>
<h3>E-Mail Me</h3>
</div>
<div class="span4">
<h5>Need Information?</h5>
<h3>Skype Me</h3>
</div>
</div>
</div>
And here is the CSS snip:
a.footer_facebook {
background: url(../img/icon_email.png) no-repeat scroll center bottom transparent;
}
a.footer_mail {
background: url(../img/icon_email.png) no-repeat scroll center bottom transparent;
}
a.footer_skype {
background: url(../img/icon_email.png) no-repeat scroll center bottom transparent;
}
As you can see. The same image is being used. It works and appears just fine for the mail and skype part but doesn't appear for the facebook part and I have no idea why. If I change the HTML code class from 'footer_facebook' to 'footer_mail/skype' the icon appears. The code appears in order to me and I validated my html with no errors. Thanks.
Never mind guys. I just deleted those bits and retyped it out and somehow it worked. Thanks anyways!
Related
I'm probably being idiotic here. I've been trying to get a jpeg image to load in the background of a section element as part of a bootstrap course I'm doing (pretty new to this web dev stuff). The image is loading fine in the firefox inspector - it shows no errors and displays the image if I hover over the link - but it just isn't displaying on the page.
Here's the relevant code:
<secton id="cover">
<div id="cover-caption">
<div class="container">
<div class="col-sm-10 sm-offset-1"></div>
<h1>Generic website title</h1>
</div>
</div>
</secton>
css:
#cover{
background: url("Assets/Photos/Blanket.jpg") center center no-repeat;
background-size: cover;
text-align: center;
height: 100%;
}
The path and name of the image is definitely correct, so it's not that.
Any ideas?
Fixed it! As expected, immediately after posting.
Apparently setting the height to 100% was the issue. Changing it to 100vmin made all the difference.
Baby steps...
I have been looking for an answer for this for a few days now and can not seem to find a solution. Below is the example I am trying to implement, however no image is displayed. The aim is to have a responsive image that covers the entire page.
<div class="col-md-12 img-responsive"
style="background-image:url(<c:url value='/resources/img/abstract-ice.jpeg' />);">
as far as I am aware this should work, I have resource mapping implemented and is working, I can tell this by navigating to the url and the image is displayed.
When placing this tag into the body element with the background attribute it displays the image but is not responsive and cuts the image as it pleases. I have tried styling this with bootstrap and using my own css, but anything I do makes no change/removes the image completely.
This url does also work with the <img> tag except then I can not overlay other elements with ease.
Ultimately my question is how can I get the div element to accept this url as a background image using pure css?
Any suggestions/prior experience would be welcomed.
HTML code
<body background="">
<div class="container-fluid">
<div class="row">
<div class="col-md-12 header_bar">
<div class="col-md-6 text-left">
Home
</div>
<div class="col-md-6 text-right">
log in
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-12 img-responsive" style="background-image:url(<c:url value='/resources/img/abstract-ice.jpeg' />);">
</div>
</div>
</div>
Write a class to the div and write the css. set width and height for responsiveness. Remove the bootstrap classes "img-responsive".
i.e
HTML :
<div class="yourclassname">
CSS:
.yourclassname
{
background-image:<c:url value="/resources/img/abstract-ice.jpeg" />
width: 100%;
height: auto;
}
Thanks to #Wisely for pointing me in the right direction,
This was solved by removing the bootstrap classes from the div that I was trying to add the background image to.
The HTML
<div class=" yourClassName" style="background-image:url(<c:url value='/resources/img/abstract-ice.jpeg' />)"></div>
The CSS
.yourClassName {
height:100px;
width:100px;
background-size: cover;
background-repeat: no-repeat;
}
I have a site: http://www.mammothnewyork.com/ which is mostly made up of galleries.
I have some images that are in portrait format, (for example if you scroll down to the "Andela" gallery).
On Desktop:
I want them to be left-aligned on desktop. i.e. have an image on the left and black on the right. You can take a look at the "Andela" section as it appears on my test server here http://45.55.217.186/ . However, this approach gets messed up on mobile.
On Mobile:
I want them to be centered. Like on the current site, http://www.mammothnewyork.com/. However, this approach does not left-align them on desktop.
The images on both the sites mentioned above have been placed on a black by me in Photoshop manually to demonstrate what I am asking. Otherwise the original image itself would just be the without the black background.
I have tinkered around with:
background: url(img/andela/Andela-01.jpg) no-repeat center center;
to use no-repeat left center but it does not fix my problem for both desktop and mobile.
My current CSS for the Flexbox slider for Andela and that image is:
<section id="andela" class="gallery section wait">
<div class="container">
<h2 class="title lighttext">Andela</h2>
</div>
<div id="galleryandela" class="slides-wrap fill">
<div class="slides">
<div class="slide">
<span class="img" style="background: url(img/andela/Andela-01.jpg) no-repeat center center; background-size: cover;"></span>
<p class="lighttext" style="top:4%;"></p>
</div>
....
....
.... <!-- TRUNCATED HTML FOR OTHER DIVS -->
....
....
<!-- slide last -->
<div class="slide last">
<span class="img" style="background: url(img/andela/Andela-20.jpg) no-repeat center center; background-size: cover;"></span>
<!-- <p class="addbg" style="top:72%;"></p> -->
</div>
</div>
<nav class="pager">
</nav>
<!-- <p class="pager-txt">Explore more using the boxes above or the arrows below.</p> -->
</div>
</section>
You can do something like this:
#media only screen and (max-device-width: 736px) {
. img {
margin:0 auto !important;
}
For more information check http://www.w3schools.com/css/css_rwd_mediaqueries.asp
I have this whole section here:
<section id="design-centre">
<section id="design-centre-cover">
<div class="container">
<div class="row">
<div class="cover-left">
<h1>Our Designs Make Luxury More Affordable</h1>
</div>
</div>
</div>
</section>
</section>
And here is the CSS:
section#design-centre {
position: relative;
}
background: url(../images/design-center-cover.jpg) center top no-repeat;
height: 800px;
background-attachment: fixed;
}
What I am trying to do is the following:
Have the image scroll when I the user scrolls, here is an example on what I am looking for:
http://www.hush.ca/hush-design-main/#hush-design
I tried using background-attachment: fixed; but that didn't work at all
At the moment, it doesn't seem to be possible without JavaScript. Try some tutorials for example code. The main premise is using either the vanilla JavaScript window.onscroll or the jQuery $(window).scroll() event handlers to detect scrolling of the main page, and reposition the background accordingly.
Also, next time you might want to search SO first for duplicate/similar questions before asking your own question.
I am looking to have a logo extend into a black bar that will run along the entire top of the screen as seen in the example below:
My original thought was that there would be a way to add CSS to the body to just do a border on the top similar to:
body {
border-top: .5em solid #000;
}
Since I don't believe that's the solution, I was thinking something along the following HTML, but haven't been able to get it to work.
<div id="topBlackBar">
<div class="container"><!--Per Bootstrap-->
<div class="span2">
<img src="img/logo.png" alt="Bachner+Co Logo" />
</div>
</div>
</div>
But then I couldn't figure out how to get the logo to go on top of it.
I am using Twitter Bootstrap 2.2.2 as a framework in building this. I would prefer to do this mostly in CSS and not have to use a black image if possible.
Thank you all for your time and assistance in this. I greatly appreciate it!
How about this: Set a top border and then a negative margin of the same amount. Your image will need to be transparent, unlike the Google logo I used in the example.
Demo
#topBlackBar {
border-top: 50px solid #000;
}
#logoContainer {
margin-top: -50px;
}
<div id="topBlackBar">
<div class="container" id="logoContainer"><!--Per Bootstrap-->
<div class="span2">
<img src="https://www.google.com/logos/2012/birthday12-hp.jpg" alt="Bachner+Co Logo" />
</div>
</div>