Problems with logo not appearing on background image - javascript

I used photoshop to layer a logo over a background image. I have the background image set up that it is responsive. I set up a image map to use the logo as a main page link. I works well on two of the other pages of the site but this page is different because of the way the background image is set up. I thought I could play a trick by using a transparent image along with usemap. did not work. I am able to see the hand when I hover over the image map, but there is no logo there. the url is http://jandswebsitedesigns.com/test/index.html. an example of the logo on the upper left hand corner is http://jandswebsitedesigns.com/test/im-new-here.html. I had a similar problem with the im-new-here page. The "top-bar" div (which is transparent) that is on top of the upper part of the image, was covering the clickable area. Samuel responded and I added div#top-bar { height: 0px; } and it fixed it. worked nicely, but the same fix won't work here.
<style>
body {
background: url(images/cd-background-1.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: relative;
min-height: 100%;
z-index: 1; }
</style>
<div style="text-align: center; height: 800px;">
<img src="images/trans.png" usemap="#logomap">
<map name="logomap">
<area shape="poly" coords="11,2,430,3,432,307,3,320"
style="outline:none;" href="index.html" alt="main page">
</map>
</div>

An image background may not appear if height and width are not set for the element that containing it
html, body{
width:100%;
height: 100%:
}
.my-div{
display: block:
width: // must give width
height: // must give height
background-image: url('...'):
}

First of all, I would recommend not using usemap, since it would make it harder to port your site to a mobile audience.
A better approach (which I personally use a lot and which would work on the design in question) is to make a div with full width and a given height, and to add the logo inside of it.
The HTML would look something like this:
<div class="header">
</div>
The CSS could then look like this:
.header {
background-image: url(...);
background-position: center;
background-attachment: fixed;
background-size: cover;
display: block;
height: 800px;
}
.header .logo {
width: 400px;
height: 300px;
display: inline-block;
background-image: url(...);
background-position: center;
background-repeat: no-repeat;
}
It's something different from your current approach, but would fix your problem with the logo.
EDIT: I've put up a little fiddle about the problem, to give more context in case necessary.

Related

html constrain box-model of image to the area it covers

I have a square image inside a rectangular div of variable aspect ratio. I set its property object-fit: contain; with the idea that it would dynamically resize to fill the div but not exceed it. This works as intended. However, I have an imagemap to go along with it, and here is where the problem is: The boxmodel for the image extends out to fill the rectangular div, despite the actual image only taking up a portion of it. Is there any way I can either constrain the boxmodel to only take up the space the image uses, or to somehow get information about that space in javascript?
Thanks!
You can either use width: 100%, height: 100% and object-fit: cover or, the better option, background-image, background-size: cover and background-repeat: no-repeat.
.img-container {
width: 400px;
height: 400px;
background: gray;
}
#img1 {
background-image: url(https://picsum.photos/600/200);
background-size: cover;
background-repeat: no-repeat;
}
#img2 {
width: 100%;
height: 100%;
object-fit: cover;
}
<p>Use background (the better option)</p>
<div class="img-container" id="img1"></div>
<br>
<p>Use full width/height and object-fit</p>
<div class="img-container">
<img src="https://picsum.photos/600/200" id="img2">
</div>
Learn about these here:
First solution:
background image
background size
background repeat
Second solution:
width & height (sizing)
object fit

instagram style explore page image list with CSS

I am trying to make a instagram style explore page but i have one question here. I have created this DEMO from codepen.io .
In this demo you can see the images. The images width and height is different not a same. I want to crop that images with CSS Like this DEMO page.
The difference between the first and second demo
First demo :
.exPex {
width: 100%;
}
Second Demo:
.exPex {
width: 200%;
}
So second demo working just in crome but this is not good idea i think. Anyone can tell me, How do I obtain the results of their second demo?
You could set the images up as background images and use background-size: cover; to get the effect that you're looking for (DEMO). This has the downside that your users will not be able to right-click or drag the images (to save them, etc.) as they might be expecting to do.
HTML for an example image:
<div class="_jjzlb" style="background-image:url('http://mihangallery.ir/wp-content/uploads/2015/11/Almost-Home-Wallpapers.jpg');">
</div>
CSS:
._jjzlb {
position: relative;
padding-top: 100%;
width: 100%;
overflow: hidden;
margin: 1px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
/* Optional centered background */
background-position: center;
}
If this downside is not acceptable, you could also put hidden images on top of the backgrounds so that they will work like the user expects.
HTML for an example image with normal image mouse interactions:
<div class="_jjzlb" style="background-image: url('http://mihangallery.ir/wp-content/uploads/2015/11/Almost-Home-Wallpapers.jpg');">
<img src="http://mihangallery.ir/wp-content/uploads/2015/11/Almost-Home-Wallpapers.jpg" class="exPex">
</div>
CSS to hide the image on top:
.exPex {
position: absolute;
display: block;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
opacity:0;
}
And here is a DEMO with the images, interacting with the user like you might expect them to.
EDIT: As pointed out by #GCyrillus, there are downsides to using a background image rather than keeping the images in the content of the page. These might include search engines and screen readers failing to recognize the image. I do not have an exhaustive list of the downsides but depending on your application it may be worth investigating.
you may use transform :
.exPex {
position: absolute;
left: 0;
top: 0;
min-width:100%;
margin: 0;
transform: scale(2);
transform-origin: 0 40px;
}
http://codepen.io/gc-nomade/pen/jrbPRy
if you define a dimension to the image the aspect ratio will also be included. The best way is to put your image inside a div and declare the size of images that way you will be able also to crop images.
Well it might seem obvious but you could just put a fixed width to it ? Try to change width: 100% with width: 400px on .exPex for example.

CSS - Show Entire Image as Background Without Cropping

I'm trying to setup a div with a background image with some text on top of it. The background image needs to stretch the entire width of the viewport, which I've been able to do successfully. This is my CSS:
.intro-header {
padding-top: 50px;
padding-bottom: 50px;
color: #fff;
background: url(http://) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
The problem I'm having is that it isn't showing the full height of the image. The image is being cropped at the top and bottom. I want the image to show it's full height and the user needs to be able to scroll down to see more content below the image.
Is there a way I can show the full image without cutting the top and bottom off?
Thanks!
Remove the fixed and instead of cover use contain. If you want a specific size though I would define a height in my css.
You can use background-size: auto 100%;
I updated an example in fiddle to see how its looks.
http://jsfiddle.net/4ozmn00t/2/
.intro-header {
padding-top: 50px;
padding-bottom: 50px;
color: #fff;
background: url(http://);
background-size: 100% 100%;
}
setting the width and height of background-size to 100% will fill the div
Remove the fixed from the background.
url() no-repeat center center

How to fix nav-bar position?

This is my Personal Webpage. Try both Chrome and Firefox. The intended effect is rendered only on firefox (only for the homepage portion).
However when I scroll down and scroll back up to the homepage,the image disappears. Why is this happening and how may I solve this?
Also,How can I render the homepage parallax scrolling effect in Chrome?
Related Code:
HTML:
<section class="featured">
<div class="container">
<div class="row mar-bot40">
<div class="col-md-6 col-md-offset-3">
<div class="align-center">
<div class="team-member">
<figure class="member-photo1" ><img class="works" src="img/Work/me.jpg" alt="" /></figure>
</div>
<h2 class="slogan" style="color:white;">name<a style="color:white;font-family: 'Lobster', cursive; font-weight:normal">.com</a></h2><h3 style="font-family: 'Shadows Into Light', cursive; color:#A2F1FE; font-size:35px;"><strong>Inspired by <a style="color:#FF2744">Purpose</a>.<br>Driven by <a style="color:#FF2744">Passion</a>.</strong></h3>
</div>
</div>
</div>
<div class="row animated opacity mar-bot20" data-andown="fadeIn" data-animation="animation">
<div class="col-sm-12 align-center">
<ul class="social-network social-circle">
<li><i class="fa fa-envelope"></i></li>
<li><i class="fa fa-github"></i></li>
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-google-plus"></i></li>
<li><i class="fa fa-stack-overflow"></i></li>
<li><i class="fa fa-linkedin"></i></li>
</ul>
</div>
</div>
</div>
</section>
CSS:
section.featured {
padding: 200px 0 255px;
background: url('homepage.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
color: #fdfdfd;
}
section.featured h2.slogan {
color: #ffffff;
font-size: 48px;
font-weight: 900;
}
/* inner heading */
section.featured.inner {
background: #eee;
padding: 150px 0 50px;
}
#solved it!
I have noticed very strange behavior that when image is not showing!
Try to resize you browser a bit and boom! it will show you background
image! (this might be a hint where we can focus)
Try to longhand the shorthand properties!
I have just simplified your short-hand properties!
then i have removed background-attachment: fixed; (and that was creating the problem)
But i have just checked in inspect elements 3-times and its working!
By removing background-attachment: fixed; property and load page again!
just use these css:
section.featured {
padding: 200px 0 255px;
background-image: url('homepage.jpg');
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
color: #fdfdfd;
}
And for the performance issue i have noticed that
you have used so many fonts links (font-awesome twice and around 15! Thats too much)
around 300 lines of embedded css!
try to minify js,css and html and reduce http-request!
website is very slow due to 79 http request!
#For Header issue!
I have analysed your code and its overriding css rules that why your
header is not looking as you want!
for that i have removed some css rules!
please remove this rules, i think that will solve your problem!
After removing some css header will look like this
![header][2]
#For the header Links
Firts of all remove all inline styles for links
Now add this css to your stylesheet!
.navbar .nav>li>a {
font-family: 'Lato', sans-serif !important;
padding: 10px 15px 10px;
color: #fff !important;
}
.navbar .nav>li>a:hover {
color: #ccc !important;
}
Active Link Code Modification!
Here is the steps for active link color background issue!
For active Color Link Activation please make sure that when you click
on linnk its <li> becomes <li class="active">, Then and only then
it will become active red!
#Final Retouch! Working Parallax Effect
section.featured {
padding: 200px 0 255px;
background-image: url('homepage3.jpg');
background-repeat: no-repeat;
position: static;
background-position: inherit;
background-attachment: fixed;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
color: #fdfdfd;
}
![staaaaaaaaaaakkkkkk][6]
#Goodluck
Your HTML is off. The side effect of that is it confuses the javascript.
Think of HTML as a skeleton, it should be symmetrical, if it's asymmetrical one side will be bigger than the other which causes numerous internal problems. You wouldn't want 5 fingers on one hand and only 3 on the other.
You have 174 opening <div> tags but 178 ending tags. On top of that you have 13 opening <section> tags but 15 ending tags. I surmise that the error was made due to the commented out sections of code. I suggest using an IDE (Notepad++ or NetBeans) that points out simple mistakes (via colored underlining). Simple mistake, like a missing semi-colon, that could have been prevented.
Heed W3C standards, they're there for a reason. This W3C report strengthens my hypothesis; fix your HTML errors and your problem should be solved.
Firefox and Chrome looked the same to me, so not sure what it is that you want to achieve exactly.
If it is the logo's disappearance from the top navbar, I think that has to do with the line-height:50 property.
But I think you want homepage.jpg to be on the background all throughout the page, then you need to move it into body style or you need to create some other div to hold the rest of the page or where you want it to be shown.
You may need to isolate your problem into its own stripped down html version and once you fix it, you may still need to start adding other parts incrementally if there are still other errors when you merge.
Remove the -webkit-backface-visibility: hidden; (animate.css line 14). The -webkit- prefix "breaks" the effect in chrome. Actually it creates a new overlaing static image.
After investigating I believe the root of the problem lies with the way position fixed is being used on the section featured background image.
Position fixed is not working as per the W3C specification in Google chrome which is also why the parallax scrolling effect is failing to work in Chrome.
Simply REMOVING FIXED from your background position should resolve the problem of the image disappearing on scroll.
CHANGE FROM
section.featured {
background: url('homepage.jpg') no-repeat center center fixed;
}
TO
section.featured {
background: url('homepage.jpg') no-repeat center center;
}
When the background is set as fixed, it is similar to putting a fixed 'div' in the background and setting the original div background to be transparent.
This is actually a bug in Google Chrome.
(Despite its popularity Chrome still does not comform to web standards as well as firefox.)
RESOLUTION
Although I have been unable to test this with your website their is a workaround for this bug.
Setting the 'position' propery of the element AND ALL parent elements as 'static', or if you have given it some other value, namely 'relative', 'fixed' or 'absolute', just remove those.
If the element or any container element, including: body & html has any position property other than static the bug will occur.
Additionally:
Ensure that backface-visibility: hidden; is not set on the element or any of its containers, including: body & html.
ALTERNATE SOLUTIONS
One alternative is to use the css clip function to create a similar effect.
CLICK FOR DEMO
Demo by Daniel Perván
.element {
position: relative;
height: 400px;
}
.clipper {
position: absolute;
clip: rect(auto,auto,auto,auto);
width: 100%;
height: 100%;
}
.image {
background: url(http://image.jpg) no-repeat 50% 50%;
background-size: cover;
position: fixed;
width: 100%;
height: 100%;
top: 0;
}

Size div to browser's window height and width

I'm making a site with big background design and I can't understand a couple of things.
Let me explain what I want to see. My web-site will be looking almost like this site
http://www.deepend.com.au/-/website-development-fox8
1. User loads the page
2. Height of every div in my page becomes the same as the height of the browser's window AND STAYS LIKE THIS, so your scrolling through my page becomes more logic.
So my question is: is there property in CSS that can get user's browser window? Or should I use JavaScript? If JavaScript, is there any jQuery plugin to simplify my job?
Thanks for your attention.
It's simply a huge image that is set as background of a div and sized as 'cover' in css which means its width determines its height based on its aspect ratio.
http://jsfiddle.net/f9yy8/4/
Demo: http://jsfiddle.net/f9yy8/4/embedded/result/
* { padding: 0; margin: 0; overflow:hidden;}
html, body { height: 100%;}
.txt {
background-image: url("http://elstika.com/images/2013/09/Pink-Tulips-Bouquet-Huge-Hd-Wallpaper.jpg");
background-repeat:no-repeat;
background-size: cover;
height: 100%;
color:white;
padding: 30px;
}
You can try to use position:absolute for the div's.
div{
position:absolute;
width:100%;
height:100%;
}
To cover 100% width/height of the user's browser window you can do this:
CSS
html, body {
width: 100%;
height: 100%;
overflow: hidden;
}
body {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
div.scroll {
overflow: auto;
}
HTML
<html>
<body>
<div class="scroll">All your content inside here</div>
</body>
</html>
you can use simply this code:
div{
width:100vw;
height:100vh;
}
this code work like a charm... :)
jsFiddle

Categories

Resources