I have 3 boxes with backgrounds that change color on mouseover. Above their backgrounds are placeholder images for now. I'm using vw for the backgrounds so that when the window is resized they change size to match.
I'm trying to get the images to align to the center of the box and to resize according to their boxes.
Here's my JSFIDDLE
<div class="socialbox">
<ul class="socialNavList">
<li class="navlinkedin">linkedin</li>
<li class="navtwitter">twitter</li>
<li class="navfacebook">Facebook</li>
</ul>
</div>
Try adding image as background to anchor tags like this:
ul.socialNavList li.navfacebook a {
background: #ccc url('http://lorempixel.com/output/nightlife-q-c-32-32-1.jpg') no-repeat;
background-size: 85% 85%;
}
This way you have responsive background.
Here is a FIDDLE to try it.
Notice I added just for the third item, to show you the effect.
Related
I am trying to figure out how I can have a background image and overlay text with it. That portion is easy. The issue I am running into is I also want a background color so when the width of the screen is wider than the image I don't want to stretch the image. I want there to be a background color extending out for 100% width. The background image color matches the edge of the image color so it looks like the image just keep extending. To do this I have something like the jsfiddle listed below.
The issues I am running into is ideally I want the text to line up with where the image is and not over the background color but that changes as screensize changes. Also when the screen gets smaller such as tablet and mobile phone I would want the image to shrink accordingly but then the background color would start showing under the image as well if I set it to a height.
https://jsfiddle.net/j1ktafd8/5/
<div class="container py-5">
<div class="row justify-content-center" style="">
<div class="overlay">
This is the text.
<p>
Some more text.
</div>
</p>
</div>
</div>
.row {
background: #34ca69 url('//via.placeholder.com/500') no-repeat center;
height: 500px;
color: grey;
width: 100%;
}
.overlay {
padding-left: 150px;
}
There are multiple ways to achieve this. I would probably go for a solution like this:
Since you want the background color to have the same height as the background image element, the element with the background color needs to get its height from the background image element. That means, the background image element should be inside the element with the background color.
The background image element is a 100% wide, but has a max-width. That way to image never becomes to big and shrinks on smaller screens.
You need to use the padding-bottom trick to set the height of the background image element. You could avoid that by using an image element, but that's a question of semantics.
https://jsfiddle.net/tvfr42ys/
I have recreated a logo using css. It is a fairly simple logo, a series of colored bars with a letter over it. The letter is within a span(to make it white) of an h1 tag. The logo is a ul with the li items acting as the boxes. I used z-index and position absolute to move it behind letter and works fine at my screens full width but becomes unaligned when browser gets smaller. I have tried setting the parent's position to relative but I still have the same problem.
I just realized the image is a bit incorrect. The logo background moves outside of the span/h1 not the parent div. The parent div has the full width of the screen.
Example
.logo-bg-box{
display: inline;
margin: 0;
float: left;
position: absolute;
left: 10.8%;
z-index: -1;
}
<div class="logo">
<ul class="logo-bg-box">
<li class="logo-bg-box1"></li>
<li class="logo-bg-box2"></li>
<li class="logo-bg-box3"></li>
<li class="logo-bg-box4"></li>
<li class="logo-bg-box5"></li>
<li class="logo-bg-box6"></li>
</ul>
<h1 class="logo"><span class="logo">M</span>inimal</h1>
</div>
The parent div has no styling.
Have you tried adding the following CSS?
div.logo {
position: relative;
}
When you use the percentage as a measurment tool, the style would say "make this content have 10.8% of the total window size from the left", so if the window width is 1000px, the position from left would be 10.8% of 1000px, hence would change whenever the window size changes. Use pixels px instead of percentage %, it would work just fine
I have a fixed nav bar at the top and a container with a full width Background spanning span12. but since the content of the background image is crucial for the layout for visual cue. i want the whole image to be displayed at all times irrespective of the window size.
Which is the best way to construct the image or set of images to achieve the same.
Large Monitor
Medium Monitor
Small Size
I have a form that will be displayed to the right of the image. Hence making it a little tricky for me to get the image working.
Link: play.mink7.com/minkstock/
If I understand correctly, you want just to have a maximum size (or percentage) that your image can reach. Try, instead of a background image, using a <img> element like so:
img{
max-width: 100%; /* or any other value */
height: auto;
}
Is there any reason you chose to set the background image using css?
If i change the #landing-page-bg div to
<div id="landing-page-bg" style="background-image: none; width: auto; text-align: center;">
<img src="http://play.mink7.com/minkstock/images/landing_page_bg.jpg">
</div>
It produces the desired effect you want (minus some red background you set).
If you wanted to then overlay items on the image you could use relative div positioning.
Do something like background: url(images/landing_page_bg.jpg) 77% 0 fixed no-repeat; for your small media query.
I have some layout css questions. Their more like best practices and whats the most efficient way to build this. Let me start with a diagram of what I'm trying to achieve.
This header menu background will be liquid and the buttons inside it will be fixed. So really its made up of a left button independent of the gray style background. Then 3 or more buttons in the gray style background followed by some icons and a search filed, all within the gray background. My main issue is getting started with how to achieve the grey background expanding to the browsers width 100% and still having 2 rounded corners at each end.
Here is a pseudo html structure
<div id="menuHeader">
<ul>
<li class="">home</li>
<li class="">button1</li>
<li class="">button2</li>
<li class="">button3</li>
<li class="tools">
<div class="icon">icon1</div>
<div class="icon">icon2</div>
<div class="icon">icon3</div>
<div class="search"></div>
</li>
</ul>
Now the css issue where do I put my repeating background. If I put it on the menuHeader as a background image then its going to be one long repeating background graphic with no left and right corners.
Would I need to setup a div for left right and center. Then have my gray buttons inside that and my blue home button outside that center div to the left of the left div. Or is there a way to do it where I can use the existing tags I have now and not have to deal with extra empty div markup.
I'm sorry if I'm not more clear but the main question I think is clear how can I get the background graphic to have rounded corners along with repeating background. Then be able to add my buttons in as background graphics.
Update: this is not going to be html5 unfortunately
#menuHeader {
position: relative;
width: 100%;
background: url("bg.png") repeat;/*An image which has a width of 1px is sufficient*/
}
#leftSide, #rightSide{
position: absolute;
top: 0;
width: 20px;/*Whatever width*/
height: 40px;/*Whatever height*/
}
#leftside{
background: url("left.png") transparent;
}
#rightside{
background: url("right.png") transparent;
}
Add this HTML inside the div#menuHeader:
<div id="menuHeader">
<div id="leftside"></div><div id="rightside"></div><!--This location is chosen, so that the automatic z-indexing causes the background to stay at the background-->
....
</div>
Create two images (or one, to reduce server load, and use background-position). If you want to add that blue box, expand the left background-image. Make sure that the elements inside the div#menuHeader have a transparent or no background.
I have the following CSS code:
.yellow {
background-image: url('/images/yellowlight.png');
background-repeat: no-repeat;
height:100%;
width:100%;
}
and the following HTML code:
<div class="yellow"> </div>
However, the div on the page does not have the image. You can see this by clicking on the blue "Logs Status" button (in the tab box) at http://cl58logs.co.cc/.
What's wrong with the CSS?
Your div is not large enough. Background images will not scale. If you want the image to scale, you'll have to use the img tag.
Also, note that height: 100% doesn't work in CSS, except for table cells.
The problem is that the div with the background image has almost no content (apart from a space character).
If you force the div to have a larger height, for example, by changing the CSS to this:
.yellow {
background-image: url('/images/yellowlight.png');
background-repeat: no-repeat;
min-height:600px;
width:100%;
}
then your image appears
The height (437px) and width (700px) of the image is greater than the dimensions of your div. Set an appropriate height and width for your div to allow for the image to be shown.
Install Firebug to better inspect your HTML elements when you come across issues like this.
Since you're setting height and width to 100%, the amount of the image you see will depend on the divs containing the yellow class. Try changing the width and height on the status class and you will actually see your the bg image on yellow.