I am trying to apply a background-image into a div, it works but i am not able to put it correctly:
I have a space between the top of my div and the top of my background image, it has been reduce a lot by adding a background-position: 0; but it still have a space of many pixels.
I appy a background-repeat: x; (which is apparently the default state), but i have an important space between my images.
How could i solved these issues ?
Here is the html code using bootstrap:
<div class="row-fluid" id="header">
<div id="bar" class="row-fluid">
<div class="span12">
</div>
</div>
</div>
Here is the CSS code:
#bar > .span12{
position: relative;
border-top: 3px solid black;
border-bottom: 3px solid black;
margin-bottom: 10%;
height: 8%;
background-image:url('../img/ban.png');
background-repeat:repeat-x;
background-position:0;
}
Here is the result i get:
Thanks !
Did you tried with background-position:0 !important;? Maybe the property it's getting overwritten.
This image was kind of corrupted, i tried with another one just because i didn't see any solution and it worked, maybe transparant background, i don't know but it came from the image...
Related
New to the site and fairly new to coding as a whole, but wanting to learn as well.
Basically what im trying to do is essentially make this border grey where the grey box is, and blue for the rest of it. I've tried googling it but struggling to find something that describes exactly what im looking for.
The grey area is 200px wide and starts roughly 26px in from the left side of the page.
Can anyone help at all? Thanks in advance
Border Image
Header code is here - the grey box is part of a logo image.
<div class="fusion-header" style="height: 91px; overflow: visible;">
<div class="fusion-row">
<div class="fusion-logo" data-margin-top="5px" data-margin-bottom="0px" data-margin-left="0px" data-margin-right="0px">
You can override a parent border in the logo element, by using a negative bottom margin with the size of the border.
.header {
background: #515151;
border: 5px solid #5EDBE7;
}
.logo {
width: 200px;
height: 50px;
margin: 50px auto;
background: #5D5D5D;
/* Override the container vorder */
border-bottom: 5px solid #999;
margin-bottom: -5px;
}
<div class="header">
<div class="logo"></div>
</div>
I have two questions, hope its not a problem putting them in one post.
Question1
I have a border I want to stretch across the full screen but cant get it to work. I have tried width: 150%, which is okay for the right side, but leaves the left as before. I then added margin:- 100% but that naturally caused issues with items with the div. My code is below. Also im guessing the code I tried would be considered a hack? I am trying not to get into that habit.
#border{
border-top: thick double #000;
border-bottom: thick double #000;
padding: 1% 0 1% 0;
margin-top: 3%;
margin-bottom: 3%;
}
#wrapper{
max-width: 1200px;
margin: 0 auto;
width: 100%;
}
#content{
margin-top: -3%;
}
<div id="wrapper">
<div id="content">
<div id="border">
<!--some small images-->
</div>
</div>
</div>
Question2 I am trying to add a jagged edge with a shadow to the top of a div, I have created the image of the jagged edge and tried using the css3 shadow effect but with no success can someone please advise?
Your #border is inside your #wrapper with max-width:1200px so it's normal it will stop at the 1200-mark. Change the HTML to
<div id="border">
<div id="wrapper">
<div id="content">
<!--some small images-->
</div>
</div>
</div>
and work from there.
Search Google for CSS3 box-shadow for your second problem, lots of examples there!
I'm trying to make a layout where I have a Div that gets added its content in a dynamic way. I want this "parent" div to have a fixed height and when content its added the div grows horizontally as needed.
This is the test HTML I made to isolate the problem.
<html>
<head>
<link rel="stylesheet" href="styletest.css" />
</head>
<body>
<div style="width:700px;overflow:auto">
<div class="anio">
<div class = "semestre">
<div class="floater"></div>
<div class="floater"></div>
<div class="floater"></div>
<div class="floater"></div>
<div class="floater"></div>
<div class="floater"></div>
<div class="floater"></div>
</div>
</div>
</div>
</body>
</html>
Here i have 7 class=floater divs that go into the class=semestre container div which is supposed to grow horizontally as I add more class=floater divs. all of this goes into a fixed width div with overflow-x:auto.
after some fighting with the css i managed the following:
div.floater {
margin: 4px;
width: 110px;
height: 82px;
border: 1px solid #ccc;
display: inline-block; /*this to make the floaters go horizontal*/
}
div.semestre{
white-space: nowrap; /* this avoid the floater overflowing under the parent div*/
margin-top: 5px;
margin: 2px;
height: 90px;
border: 1px solid #ccc;
min-width:98%;
}
div.anio{
margin : 2px;
border: 1px solid #ccc;
min-width:98%;
}
So this worked..kind of.. the class=floater divs go horizontal and cause the activation of the overflow-x on the outermost div, but the container divs that contain the class=floater div don't grow as i think the should (this can be seen by the borders not growing). After googling I found some proposed solutions like adding width:auto on top of the min-width: css property or floating them, but none worked. This is a minor issue since the borders are just for formatting.
The mayor problem I'm having is when I try to add content to the class=floater divs they just go CRAZY and won't stay where they should( when they had no content). i tried reverting the white-space:nowrap by adding white-space:normal to the floater class but that didn't work. After that I just went berserk and started trying random stuff and managed to fix my first problem but the I forgot what I did and went back to step 1 D:.
To be honest I'm very new to html/css and I'm learning by doing. So if this question has been already asked/answered believe me that I searched for it. Also excuse my English, doing my best.
Thank you for your time.
edit:
By request, the fiddle :D http://jsfiddle.net/UBYKy/1/
there you can see both of my problems.
edit 2: i believe i have found a solution to both problems. For the first one I solved it by adding display: inline-block to the parent divs and for the 2nd problem I added vertical-lign:top to the floater class css(as afshin suggested) and it works just fine. I hope this helps anyone having the same problem.
I think you should use this
div.floater {
vertical-align:top;
margin: 4px;
min-width:110px;
width: auto;
height: 82px;
border: 1px solid #ccc;
display: inline-block; /*this to make the floaters go horizontal*/
}
DEMO
Does anyone know how to yellow highlight a field in table and also have the yellow color print? This hightlights on the screen, but does not print the yellow:
<td style="background-color: yellow">Total:</td>
I found out that browsers, by design, do not print background colors. The only workaround I was able to find is that you can make a ultra-thick border of the cell or div:
<td style="border-left: 999px solid yellow">
Unfortunately, the cell contents won't overlay over the thick yellow border. I checked everywhere online and the closest answer I could find was on stack overflow:
Best Ways to Get Around CSS Backgrounds Not Printing
However, the answer was untested and I was unable to get it working on my computer. I tried toying around and experimenting with no luck.
Ok, I found a solution to my problem, but the solution is rather inelegant. Like I said in my above question, you have create a div tag with a big color border on it. The thing is is that colored borders can print correctly. Then, where the highlighted color is displayed, lay another div tag with the text on top. Inelegant, but it works.
It's best to set both the text div and the highlight div's within a third "outer" div for easy placement. the inner divs should be position "absolute" and the outer div should have position "relative". Sample code is below. This is tested code on both Chrome and Firefox:
<style type="text/css">
#outer_box {
position: relative;
border: 2px solid black;
width: 500px;
height:300px;
}
#yellow_highlight {
position: absolute;
width: 0px;
height: 30px;
border-left: 300px;
border-color: yellow;
border-style: solid;
top: 0;
left: 0px
}
#message_text {
position: absolute;
top: 0;
left: 0px;
}
</style>
<body>
<div id="outer_box">
<div id="yellow_highlight"> </div>
<div id="message_text">hello, world!</div>
</div>
</body>
I'm playing with the -webkit-mask-box-image css property.
<div style="
background-color: red;
-webkit-mask-box-image: url('images/cards/set1.png');
"></div>
This works great. I end up with a red element in the shape of the mask image.
The only catch is that I need about 25 different images. I could just load up 25 different mask images, but it'd be great if I could load just one image and then use it akin to a CSS sprite where I reposition it or clip it.
But I can't think of a good way to do that with the mask properties. Is it doable?
The one solution I came up with would be to use markup akin to this:
<div style="
width: 100px;
height: 100px;
overflow: hidden;
position: relative;">
<div style="
background-color: red;
-webkit-mask-box-image: url('images/cards/set1.png');
position: absolute;
top: -400px
"></div>
</div>
Instead of using a background image and positioning it as you would a sprite, I'm using a DIV and positioning that within a parent div that crops it. I think that's an OK option, but was wondering if there was a webkit-centric CSS property already designed for exactly this.
I went digging into webkit masks since I got really interested in your question - I'm not sure if I understand correctly the difference between -webkit-mask-image and -webkit-mask-box-image - but the main difference to me is that -webkit-mask-box-image can stretch to fit the container even if the mask image is not the same size.
Since you have a fixed size container I would try using the -webkit-mask-position to move the mask image (note that it works only together with -webkit-mask-image).
Sample: http://jsfiddle.net/easwee/pChvL/68/
Code:
<div class="image mask">
<img src="image.jpg" />
</div>
<br />
<div class="image mask2">
<img src="image.jpg" />
</div>
.image {width:200px;height:200px;}
.mask {
border:1px solid green;
-webkit-mask-image: url('mask.gif');
-webkit-mask-repeat:no-repeat;
-webkit-mask-position:0 0;
}
.mask2 {
border:1px solid green;
-webkit-mask-image: url('mask.gif');
-webkit-mask-repeat:no-repeat;
-webkit-mask-position:0 -200px;
}
Not sure if this will work for you, but atleast I had fun digging in.