I've been reading this forum for a while now and decided that I might find help on this one because I couldn't find any exact answer.
I want to make a landing page with a big photo and put a responsive image map on it. I can make a map, I can put an image but the problems start when I want to make it responsive while the image stays centered (background-position: center). If I don't use the background-position:center the image is looking really small on mobile and it won't work like this.
I know that I can try putting a transparent image on the background but I don't know how to make the map responsive then.
Here is the link to my work site if you can help me http://www.mafia.brandscatter.com/
How about something like this?
https://jsfiddle.net/Lj0w9dnf/1/
.background{
background-color:red;
width:100%;
height:100vh;
padding:25%;
}
.map{
background-color:blue;
height:100%;
width:100%;
}
<div class="background">
<div class="map">
</div>
</div>
Related
Hi HTML and CSS gurus, I am trying to prepare a website for myself and got stuck in aligning texts. Need some help on it.
I have attached 2 screenshots
Desktop View:
[]
Mobile View
On Desktop View (Image 1)
The blue colored background is a png image (made in photoshop) with a dimension of 400 x 603 px. The black color background on the left or the red color background on the up are coded in HTML. I want the whole paragraph ("Many unit rent....gone by then") to be aligned in the middle of the blue background (from top where it is at present). How to code it dynamically so that whatever the screen size is the text remains in the middle?
I want the paragraph to have a 50 px gapping from both sides of the blue background. How to achieve it?
On Mobile View (Image 2)
Whenever I try to resize my browser in mobile view and see the same paragraph it is shifting its base and going outside the blue box whereas it should be in the middle.
I have written the HTML and CSS code as:
HTML:
<div class="caption">
<h3>Michael Corbett, who hosts NBC EXTRA’s ‘Mansions and Millionaires’ has observed:</h3>
</div>
<div class="img-cont fullh">
<img src="img/background.png"/>
<p id="text">Many units rent immediately, so it's kind of foolish to wait till the weekend just to get a peek; Chances are, it will be gone by then.</p>
</div>
CSS:
#text
{
z-index:100;
position:absolute;
color:white;
font-size:1.5em;
font-weight:regular;
left:50px;
top:50px;
width:80%;
}
Am I missing something?
I think You should add Position relative to your upper div for solve this problem. you are not showing your full html or css thats why I am not sure this is right or wrong.
.img-cont.fullh {
max-width: 100%;
position: relative;
}
Nothing seems to be working for me. But what I would like to do is make the header image fit to the size I'd like, which is the container. Heres the actual page link: this.
And heres the jsFiddle here: http://jsfiddle.net/Zorabelle/f7DRh/.
I think this is what I have to fix but I just don't know.
/*HEADER IMAGE DETAILS - HEADER MUST BE 921PX WIDE*/
.header {
background-image: url(http://media.tumblr.com/aceb30d864925524ee215c0d6f88e1bc/tumblr_inline_mu0br62w4R1s7znag.gif);
background-repeat:no-repeat;
height:200px; /*CHANGE TO THE HEIGHT OF YOUR BANNER*/
}
I want the 'Define the Term' header to fill up that whole space. Help?
Here's a working JSFiddle example: http://jsfiddle.net/f7DRh/2/
You can set the image size to container by specifying:
background-size:100% 100%;
That way it will always keep it within container's width and height.
Reference:
http://www.w3schools.com/cssref/css3_pr_background-size.asp
You can also use the traditional replacing your div
<div class="container">
<div class="header">
</div>
becomes
<div class="upcon">
<img src="http://yourimage.com" style="width:100%" />
</div>
By the way, with this method the browser tries to render the image correctly if the user has a resoltion smaller than what your are asking (1050px). It won't crop it.
What's the best way to create this shape in CSS3?
The image should be a square image.
Thanks in advance.
EDIT:
I tried alot, this is not just regular CSS.
I already tried googling on 'Arc' or any similar keyword.
This is the full image:
Thing is, it should stretch to full width. I tried implementing it as an image, but when you resize over 1400px the image becomes ugly, would be awesome if I could fix this with just CSS.
Well, as by the comment it's quite simple!
If you use an HTML structure like that:
<div class="arcborder">
<img src=""/>
<div class="colorborder"></div>
</div>
Then you can simply manage the css in that way:
.arcborder{
width:800px;
height:450px;
overflow:hidden;
border-radius:600px/80px;
}
.effectborder img{
margin-top:30px;
width:800px;
height:400px;
border-radius:600px/40px;
}
And you are done! Example
I am wondering how is it possible to achieve notification count as we see in linked (as shown in image below)
I have tried implementing a similar solutions, using a Span which has a background image and then using tag along with it.
Roughly,
<span class="message-icon" title="Unread Message" style="display: inline-block"></span><span style="background-color: red"><sup><b>5</b></sup></span>
this is no where near to what is there on linkedin's site.
Is there a cooked solution already available for it? Or any Ideas how it can be achieved?
Take a look at this: http://jsfiddle.net/D3VVv/1/
From this post: How can i overlay an 10x10px image on top of another image?
If you make the div that contains the message icon as big as the message icon + the notification icon, then you can position the notification icon in the top right corner of that div using absolute positioning. As is shown in the fiddle.
There are a few ways, here is an example of absolute positioning:
http://jsfiddle.net/e2Zs4/
HTML
<div class="con">
<img src="http://www.pictures-of-kittens-and-cats.com/images/cute-kitten-pictures-002-small.jpg" />
<img class ="number" src="http://www.privatefly.com/export/PrivateFly/.content/images/services/red_numbers_4.gif " />
</div>
CSS
.con { width:100px; height:100px; position:relative; }
.number { position:absolute; top:10px; right:10px; }
First time user, with a simple but frustrating problem.
I am a new web coder, designing my website (austinwoehrle.net)
I am trying to make the banner of Seattle scale with my darker background, but if I zoom in, it breaks out of the div.
On smaller monitors the image will be too large to fit in the darker background.
I have already set the width to 100% and have tried a lot of trouble shooting!
Thanks for the help!
Again, my website is http://www.austinwoehrle.net/homepage.html
At the moment you have this:
<div id="seattle" alt="test">
<img src="seattle.jpg" width="620" height="210">
</div>
Change the width of your image to width="100%". This may then be slightly wider than you want it, so you will want to add margin or padding to the containing seattle div on line 126 of mystyle.css
width:80%;
margin:0 10%;
Then alter your image to have a width of 100% and remove the height.
<img src="seattle.jpg" width="100%">
Notes
margin:0 10%;
//is equal to writing
margin-top:0;
margin-right:10%;
margin-bottom:0;
margin-left:10%;
Check out this site for information on how to write this.