Why don't I see my background image?
jsFiddle here
CSS
.arrow_icon
{
display: block;
width: 320px; // 25
height: 240px; // 25
background-image: url(http://s12.postimg.org/yi7yl766z/5b8nbn.jpg);
background-repeat: no-repeat;
}
.a1
{
background-position: 0px 0px;
}
HTML
<table border="3">
<tr>
<td><span id="a2" class="arrow_icon a6" isClicked="0"></span></td>
</tr>
</table>
CSS does not support C++-style comments.
They create syntax errors which cause the parser to skip the subsequent properties (until the next semicolon).
Remove the //s.
Related
I have table with cells (td) with background images, on both mobile and desktop chrome it shows thin line between TD if table's absolute position is not aligned to round pixels.
// in case you don't see the glitch at 0.5px
var f = 0;
window.onclick = function() {
f += 0.3;
document.body.style.paddingLeft = f + 'px';
document.body.style.paddingTop = f + 'px';
};
body {
background-color: white;
padding-left: 0.5px;
padding-top: 0.5px;
}
table {
border: 0;
border-collapse: collapse;
}
table.image td {
background-image: url(https://ghost.sk/chrome-error/purple.png);
height: 40px;
width: 40px;
}
table.solid td {
background-color: purple;
height: 40px;
width: 40px;
}
div.image {
background-image: url(https://ghost.sk/chrome-error/purple.png);
height: 40px;
width: 40px;
display: inline-block;
}
Table with image bg (glitch both desktop and mobile):
<table class="image">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
Table with solid bg (glitch usually only mobile):
<table class="image">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
On mobile it glitches for divs too (more likely with images than solid colors):
<div>
<div class="image">a</div><div class="image">b</div>
</div>
<div>
<div class="image">c</div><div class="image">d</div>
</div>
Notes:
In demo I use 0.5px initial padding but in real code I am not intentionally setting it to fractions, it can happen any time, e.g. when centering table or when using padding-left 1em and then it depends on font.
In demo I'm using image filled with solid color to show it better (if it was solid color I wouldn't use image and besides on mobile it shows same glitch when using solid colors too).
It "feels" like OpenGL's error when "clamp to edge" is not set.
I'm not using tables in my original design, it's just is easier to trigger it with tables.
Here is screenshot how it look like: https://ghost.sk/chrome-error/screenshot.png
Tested on: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/69.0.3497.81 Chrome/69.0.3497.81 Safari/537.36
I had the same problem, look at this Youtube video : https://youtu.be/y88k6khLGvs. On my case, the thin gray lines where appearing only when the scroll bar was showing on the body.
But, found a solution that worked for me. Since Chrome seems to take 1 px at the end of each background-image, I changed my background CSS from this :
td
{
background-repeat: repeat-x;
}
to
td
{
background-size: 110% 100%;
background-repeat: no-repeat;
}
It simply tells Chrome to go beyond the last pixel of the TD and renders it correctly.
This problem is indicated here. Chrome cause the background-image to restart in each cell, rather than flowing nicely uninterrupted for the whole row.
I hope this will be fixed in the next versions of chrome.
I was stuck with this bug for some while and finally find a simple solution. Just add background-repeat: no-repeat on td. background-repeat: no-repeat on tr if the background is on tr
I made a sprite with all our icon images as the same image repeats a lot and I didn't want it loading over and over.
Below is an example of the CSS code
#visa{background: url('sprite.png') -69px 0; left: 0; width: 87px; height: 36px;}
The Visa icon is visible in the table, but it's aligned to the left, I need it alighted center
<tr>
<td><p id="visa"></p></td>
<td><p>Visa</p></td>
<td><img src="ok.png"></td>
<td><img src="ok.png"></td>
</tr>
I've tried to align center the P tag and the td tag using
aligh:center and text-align:center; neither are working for me.
I tried some position classes but couldn't get it working, but i may not have been using it correctly.
there is other styling I'd like to do to the cell as well like padding top/bottom but I need to get this sorted first.
What can I try ?
here is JS fiddle
https://jsfiddle.net/dave5000/v4cgeo9z/
Try this:
#visa{
background: url('sprite.png');
background-size: 36px;
background-position: center;
left: 0;
width: 87px;
height: 36px;
}
Don't really know the sizes of your image, but I guess this will do the trick.
EDIT:
Sorry for the wrong info, I messed up with copying from my example..
How about this?
#visa{
background: url('sprite.png');
background-repeat: no-repeat;
background-position: center;
display: block;
left: 0;
width: 87px;
height: 36px;
}
EDIT 2:
After you added the demo, I was able to generate this solution:
Fiddler Demo
I removed the
left: 0;
and added the next css line:
display: inline-block;
My fiddler demo works for me, so let me know if it works for you as well
You can add margin-left: 30%; to your #visa { css. You can play around with the % to get the correct position, or even use px if you like.
th {
text-align: center!important;
}
thead > tr > th {
padding:20px!important;
background-color: #9fc5d0;
}
td {
text-align: center!important;
border: 1px solid #bdbdbd;
}
#visa {
background: url('http://www.davidstokes.com/1/payments/gg-sprite.png') -69px 0;
margin-left: 30%;
width: 87px;
height: 36px;
}
<table>
<thead>
<tr>
<th colspan="2" width="40%">Method</th>
<th width="20%">Deposit</th>
<th width="20%">Withdrawal</th>
</tr>
</thead>
<tbody>
<tr>
<td><p id="visa"></p></td>
<td>Visa</td>
<td><img src="https://cdn0.iconfinder.com/data/icons/Free-PSD-blogging-icons-Bimbilini/32/ok.png"></td>
<td><img src="https://cdn0.iconfinder.com/data/icons/Free-PSD-blogging-icons-Bimbilini/32/ok.png"></td>
</tr>
<tr>
<td><p id="visa"></p></td>
<td>Visa</td>
<td><img src="https://cdn0.iconfinder.com/data/icons/Free-PSD-blogging-icons-Bimbilini/32/ok.png"></td>
<td><img src="https://cdn0.iconfinder.com/data/icons/Free-PSD-blogging-icons-Bimbilini/32/ok.png"></td>
</tr>
</tbody>
</table>
Hope it helped
How open are you to using jQuery and plugins? Backstretch is a plugin that lets you set background images nicely, and works well with responsive design also. Here is a link, take a look it might be helpful!
http://www.jquery-backstretch.com/
If you can't use jQuery, what about the following:
<tr>
<td>
<p id="visa">
<img src="sprite.png" />
</p>
</td>
<td><p>Visa</p></td>
<td><img src="ok.png"></td>
<td><img src="ok.png"></td>
</tr>
#visa{
width: 87px;
height: 36px;
}
#visa img {
width: 87px;
height: 36px;
display: block;
margin: 0 auto;
}
I am trying to make a slanted div with a background image. HERE is a screenshot of what I am trying to achieve.
I have always made my slanted divs using css triangles. However I am finding this technique troublesome in this situation because it is 2 separate parts and the pictures wont connect.
As of right now in my code I have a div with the background image applied with a before element that looks like this:
#booking-form:before{
content: "";
position: absolute;
top: 0;
bottom: 0;
left: -320px;
border-top: 726px solid transparent;
border-right: 320px solid $secondary;
}
This makes the triangle I am looking for however if I add an image to the triangle it fills the entire before css and looks like this:
But I need it to look like the original.
Any suggestions? Thank you!
Just use a full width div with a suitably angled gradient background instead.
No transforms, no borders.
body {
text-align: center;
}
.content {
height: 150px;
padding: 20px 0;
background: linear-gradient(-65deg, rgba(0, 0, 255, 0.5) 65%, transparent 65%);
display: flex;
}
div {
background-image: url(http://www.fillmurray.com/460/300);
}
form {
width: 50%;
background: rgba(255, 255, 255, 0.85);
margin-left: auto;
margin-right: 1em;
}
<div>
<div class="content">
<form action=""></form>
</div>
</div>
Unfortunately not avalaible everywhere, mix-blend-mode could be an hint using gradients to choose wich parts to blend
body {
height: 100%;
background: linear-gradient(110deg, white 45%, transparent 45%), url(http://lorempixel.com/800/600/city/3) right no-repeat;
background-size: 100% 100%, 75% auto ;
margin: 0;
}
html {
height: 100%;
min-width:800px;
margin: 0;
background: linear-gradient(110deg, transparent 45%, darkcyan 45%), url(http://lorempixel.com/800/600/city/2)top left no-repeat;
background-size: 100% 100%, 75% auto;
}
body {
mix-blend-mode: overlay;
}
/* demo purpose */
body>div {
padding:1px;
padding-left: 55%;
color: black;
}
body>p {
margin:0;
}
/* small snippet view purpose */
html, body {
background-attachment:fixed;
}
<p> nop, mix-blend-mode is not avalaible here :( </p>
<div>
<h2 name="Summary" id="Summary">Summary<a class="button section-edit only-icon" href="/en-US/docs/Web/CSS/mix-blend-mode$edit#Summary"><i aria-hidden="true" class="icon-pencil"></i><span>Edit</span></a></h2>
<p>The <strong><code>mix-blend-mode</code></strong> CSS property describes how an element's content should blend with the content of the element that is below it and the element's background.</p>
<p></p>
<table class="properties">
<tbody>
<tr>
<th scope="row">Initial value</th>
<td><code>normal</code></td>
</tr>
<tr>
<th scope="row">Applies to</th>
<td>all HTML elements</td>
</tr>
<tr>
<th scope="row">Inherited</th>
<td>no</td>
</tr>
<tr>
<th scope="row">Media</th>
<td>visual</td>
</tr>
<tr>
<th scope="row">Computed value</th>
<td>as specified</td>
</tr>
<tr>
<th scope="row">Animation type</th>
<td>discrete</td>
</tr>
<tr>
<th scope="row">Canonical order</th>
<td>the unique non-ambiguous order defined by the formal grammar</td>
</tr>
<tr>
<th scope="row">Creates stacking context</th>
<td>yes</td>
</tr>
</tbody>
</table>
</div>
How can I display my image and the table on the same level? This is really depressing me because I can't get "inline-block" to work. :(
<p id="play">
hey
</p>
<div id="menu">
<table>
<tr>
<td>Models</td>
</tr>
<tr>
<td>Cars</td>
</tr>
<tr>
<td>Modern Houses</td>
</tr>
<tr>
<td>Vacation Spots</td>
</tr>
<tr>
<td>Sports and Outdoors</td>
</tr>
<tr>
<td>Books</td>
</tr>
<tr>
<td>Abandoned Houses</td>
</tr>
<tr>
<td>Summer Wear</td>
</tr>
<tr>
<td>Makeups</td>
</tr>
<tr>
<td id="site">Site Info</td>
</tr>
</table>
</div>
<img src="C:\Users\Elexie\Documents\Downloads\faki2.jpg"/>
body {
background: #181818;
margin: 0;
padding: 0;
}
/* set body display to inline-table*/
#play {
background: black;
color: white;
margin: 0;
padding: 0;
height: 35px;
}
table,td {
color: white;
border: 1px solid white;
border-collapse: collapse;
width: 160px;
padding: 10px;
font-family: ;
}
table {
}
#site {
height: 350px;
}
img {
float: right;
}
I changed the picture, but it's of similar size
http://jsfiddle.net/w6d5g/
In your css code:
table{
float:left;
}
Should do the trick.
Read more: http://www.w3schools.com/css/css_float.asp
Check this fiddle: http://jsfiddle.net/Mohamed_nabil/F8MKp/
/*******Added style******/
img
{
/*165px is your Menu width with borders*/
max-width: calc(100% - 165px);
/*For cross browser*/
-webkit-max-width: calc(100% - 165px);
-moz-max-width: calc(100% - 165px);
-o-max-width: calc(100% - 165px);
-ms-max-width: calc(100% - 165px);
display: inline-block;
vertical-align: top;/* Can be middle, bottom */
}
#menu{
display: inline-block;
}
Firstly, wrap your image tag with a div. Name this div anything you want. Let's name it: "image-test".
<div class="image-test">
<img src="(URL for IMAGE)">
</div>
Next, let's say you want your table to take up 50% of the width and your image to take up the other 50%. We are also going to float these div elements so they are not in the flow of the document.
#menu{
float:left;
width:50%;
}
.image-test{
float:left;
width:50%;
}
You'll notice your image is larger than the containing div, so let's set a max width on all images to avoid future problems.
img {
max-width:100%;
}
I have a table which has two rows and three columns. The first row serves the purpose of body and the second row serves the purpose of footer.
I want to design the footer using CSS, so that the look and feel is better. I can add the image, but there is gap between between each image so it has not come out well.
The row tr has three columns, and each td has one image.
Below is the HTML code.
<tr>
<td class="FooterLeftBG"> //left css class
</td>
<td style="width: 85%;" class="FooterBG"> //middle css class
<table style="width: 85%">
<tr>
<td align="left">
some text
</td>
<td style="padding-top: 1px">
some text</td>
</tr>
</table>
</td>
<td class="FooterRightBG"></td>//right css class
</tr>
Here is the CSS code:
td.FooterLeftBG // CSS class for left td, used to make left hand side curve footer
{
background: url('footer-leftbg.png') bottom left;
height:35px;
width:12px;
padding:0px;
float:right;
}
td.FooterRightBG // CSS class for right td, used to make right hand side curve footer
{
background: url('footer-right-bg.png') bottom right;
height:35px;
padding:0px;
width:12px;
float:left;
}
td.FooterBG // CSS class for td holding the footer contents
{
background:url('footer-middle-bg.png');
background-repeat:repeat-x;
border-collapse:collapse;
height:35px;
width:5px;
}
Please help. I have been trying for 1 week :( I have tried through Google also.
Expected format:
http://i.stack.imgur.com/c7ULg.png
http://i.stack.imgur.com/2J4zW.png
You can wrap your table inside a Div, and apply the below CSS class to it. The sample has all four curved borders, you can modify the radius values as per your requirement:
.container {
background-attachment: scroll;
background-clip: border-box;
background-color: #FFFFFF;
background-image: none;
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat;
background-size: auto auto;
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
box-shadow: 0 0 10px #909090;
cursor: default;
display: none;
left: 12px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
position: relative;
text-align: left;
z-index: 100;
}
If you want to stick with a table for your layout, you could try applying the following CSS to the <table> tag:
border-collapse: collapse;
That might get rid of the space between the footer images.
Try adding cellspacing='0' to your table tag in the HTML