I have tried to add an image in a table cell as background image with the code below, but it is not working properly.
<tr><td style="background-image:url('search_images/Zyra.png')">Zyra</td></tr>
I've tried with different quotes and without the url() but in all cases only the text shows.
EDIT: Going to post my php code.
echo "<td style='width:100%; background-image: url(search_images/".$row["champion"].".png)'>".$row["champion"]."</td>";
This works in that it shows the images with the text over them except it shows just a single row and the cell size is fit to the text instead of the background image.
I want the rows to fill the width of the browser window and the cells to be the size of the background image.
Ensure that you are putting <table> tags around your <tr> and <td> tags (this is what makes the snippet work). You can also add a width and height to the if you'd like to show more of the image.
td.bg{
background-image:url('https://cdn.pixabay.com/photo/2016/03/28/12/35/cat-1285634_960_720.png')
}
<table>
<tr>
<td class="bg">Zyra</td>
</tr>
</table>
Your code should work fine, check your browser console for errors, if it says the image is not found then you might be mistyping the image path.
If the image and the HTML file being served are in the same directory you can use background-image:url('./image.jpg');, otherwise a full path is needed starting from the HTML page's directory like background-image: url('./firstDir/secondDir/image.jpg');.
Here is a working example of your code working:
<table>
<tr>
<td style="height:80px; width:100px; line-height:70px; background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQJbUiuUbKuYmKJfS4dYY0XGtRCGmNTco916Tyfiuf84wkhuWSj); background-size: 100% 100%; color:#F00; font-weight:bold;">This is test</td>
</tr>
</table>
There is nothing wrong with your code. My guess is that because you are using a png file, which may generate white background for those blank pixels.
Below is an example, showing it works.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<table>
<tr>
<td style="background-image:url('https://i.stack.imgur.com/Np80G.jpg?s=48&g=1');
background-size: auto; background-repeat: no-repeat;
color: white; font-weight: bold; padding: 20px;">
some text here
</td>
</tr>
</table>
</body>
</html>
Related
I have a container to center my web page using css:
#container{
width: 1000px;
height: 100%;
margin: 0 auto;
border-left: 1px solid black;
border-right: 1px solid black;
}
This perfectly displays the left and right borders from the top of the page to the bottom of the page, no problem.
However I have some HTML that is only displayed by PHP when the relevant $_GET is present, for example:
<body>
<div id="container">
<?php if($_GET['something'] == "something"){ ?>
<div>
<table>
<tr>
<td>Some HTML Here</td>
</tr>
</table>
</div>
<?php } ?>
<div>
<table>
<tr>
<td>Some HTML Here</td>
</tr>
</table>
</div>
</div><!--container end-->
</body>
When this html is displayed it pushes the content below it down as it should, however the left and right borders end part way up the page at the point where it would end should the html displayed by the PHP not be there.
Does anybody know why this is happening and if possible point me in a direction to get the border to continue down to the bottom of the page?
I have googled and googled but cant seem to find what I need.
Many Thanks
Fixed it, changed height:100% to min-height:100% in the CSS.
Its amazing how you spend hours searching then as soon as you post a question you find the solution. Nvm its here for others to see should they need it :)
So basically i have two php files, one with all the functions etc. and one with mixed php and html code.
<table>
<?php echo read(); ?> //This prints a full table with <tbody> etc.
</table>
My question: How do I access this PHP printed html code from my CSS style sheet? It
s a seperate file and i have linked it correctly etc. (since it styles all the html code on the same file)
I have tried just putting
tbody { width:100px; padding: 20px;}
and all those normal ones, but for som reason it doesn't apply to the code the PHP prints out.
Suggestions? (new to PHP, be nice)
Add a class to the <table> tag like
<table class="my-table"> and then try to add in your css file
.my-table{
width:100px;
}
You should apply the css styles to the table tag.
So if anyone stumbles on this thread with the same problem, I managed to solve it by putting all the CSS info in the <table> tag like this:
<table
style="
width:480px;
margin-left:10px;
font-family: calibri;
background-color:white;
color:black;
padding:5px;
border:1px solid black;
"
>
I am trying to put together a little contact form for my 3 year old son who has leukemia. I want to use it so people can send him notes of encouragement, and we can print them out and hang them in his room. I've got the form working and posting the data using DOMpdf. My issue is, the background image I am trying to use as the "stationary", refuses to scale out to 100% and regardless of what size I make it in my graphic software, it is not working. Any help is appreciated on what I am missing. Code below. For example, see: http://bebrave.me/#contact
<head>
<style>
body { background-image: url(http://www.bebrave.me/test.jpg); background-position: top left; background-repeat: no-repeat;
background-size: 100%;
margin-top:300px;
width:612px;
height:792px;
}
</style>
</head>
<body>
<table width="500px" border="0" align="center" cellpadding="0" cellspacing="0" id="Table">
<tr>
<td align="left">Dear Joshua,<br />
<?php echo $post->Message; ?></td>
</tr>
<tr>
<td align="right">Be Brave!<br />
-<?php echo $post->Name; ?></td></tr>
</table>
</body>
A few notes, these apply if you're using dompdf 0.6.0 beta 3 or the latest from github:
the background-size property is not yet supported in dompdf
you're adding a margin to the body, so the content of the body (including any background image) will be start after the margin is applied
dompdf applies a default page margin of 1.2cm
the default DPI in later versions of dompdf is 96. It's probably a bit easier to get a handle on the dimensions and placement if you drop that back to 72 so that it matches the PDF standard. If you use any other DPI dompdf will perform translation during the render.
dompdf does appear to diverge from modern browsers in regards to the application of the background image. This is probably something the dev team will want to look at in the future. However, since you're targeting dompdf you'll have to take into account its quirks.
Here's a re-written document that appears to do what you want. It's targeting the latest code available on github which I recommend you use considering the many improvements it includes. If you need to target a different release let me know and I can tweak the HTML.
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Denk+One' rel='stylesheet' type='text/css'>
<style>
#page { margin: 0in; }
body {
font-family: Denk One, sans-serif;
background-image: url(http://www.bebrave.me/test.jpg);
background-position: top left;
background-repeat: no-repeat;
background-size: 100%;
padding: 300px 100px 10px 100px;
width:100%;
height:100%;
}
p {
width: 400px;
margin: auto;
}
.signature {
margin-top: 4em;
text-align: right;
}
</style>
</head>
<body>
<p>
Dear Joshua,<br />
You may not understand all that's happening. Sometimes, you may not even care.
Maybe you just want to do what you have to do to get better so you can
go back to being a three-year-old ... growing, learning, playing, loving.
It may be hard to understand, but you are a hero to your family and friends. You
are a hero to them because you show strength in the face of something so
scary. Stay strong, be happy, and and get better.
</p>
<p class="signature">
Be Brave!<br />
-BrianS
</p>
</body>
</html>
The resolution of your image should be 96 pixels per inch (PPI).
For example:
Format A4: Resolution 96ppi and 210mm x 297mm or 297mm x 210mm (horizontal or vertical, respectively)
We are in the process of redoing our whole website. The current website is over 7 years old, but seems to have a CSS bug that only appears in Webkit-based browsers (Chrome and Safari). We would like to fix that bug as it may take a while before the new site is ready.
We have a table with fixed width:
<table width="1000" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF">
<tr>
<td class="left" width="200" valign="top">
Contents of the menu here.
</td>
<td valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
Contents of website here.
</table>
</td>
</tr>
</table>
The CSS of the relevant elements and classes is as follows:
td {
font-size: 11px;
}
td.left {
width: 200px;
padding-top: 50px;
background-color: #EFEFEF;
}
td.top {
height: 16px;
align: right;
padding-bottom: 2px;
}
The issue is that Webkit calculates the td with class left to be 161 pixels instead of 200 pixels. I can resolve this issue by adding either style="display: block" or style="min-width: 200", but when I do that, Webkit resizes the first table to 1039 pixels rather than 1000, causing the rest of the page to shift all over the place. It seems to totally ignore the fixed width requirements.
I would like to know if there is a way to fix this without drastically changing the structure of the website. If you need to, you can play around with the CSS on the website in question. Note that the bug only appears in Chrome and Safari. I have checked many bug reports for Webkit and many Stack Overflow questions, but none of them seem to quite match my problem.
I think the problem are the images in the righthand "sponsoren" table.
Setting min-width to the left table, and width:150px to the div-tag in the "sponsoren"-table, is working for me.
Wow, don't use tables on such elementary script, go with divs:
<div style="width:1000px; background-color:#ffffff; float:left; clear: both;">
<div style="width:200px; float:left;">
Contents of the menu here.
</div>
<div style="width:800px; float:right;">
Contents of website here.
</div>
</div>
This should fix your problems.
Try to add class class to your table and :
table.yourclass {
width: 1000px !important;
}
I'm using PHP & MYSQL to get images and other text info from my database to show on my page. This is working fine. The problem is the pictures stored in the database are different sizes. So i have applied some HTML & CSS to get a fixed size of the pictures to display on my page. Unfortunately this isn't working. Here is my code:
HTML:
<table>
<tr>
<td><b>The title</b></td>
</tr>
<tr>
<td class="foto_style"><img src="http:/mypage.com/pictures/mypic.png" /></td>
</tr>
</table>
CSS:
.foto_style{width: 50px; height:50px;}
Change your CSS to:
.foto_style img {
width: 50px;
height:50px;
}