I have a background image like image.jpg. I want to resize this image according to any div which is using it.
How can i do this in jquery or any other way.
There's many different ways to do this. The best in terms of execution speed is to use CSS, but jQuery can accomplish anything CSS can using the $().css() method.
Here's a fiddle with four five different methods, from just putting the image in, to stretching in css and jQuery. The code is below:
<style>
div
{
background-image : url("http://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/Les_Halles_%28metro_de_Paris%29_-_Entree.jpg/800px-Les_Halles_%28metro_de_Paris%29_-_Entree.jpg");
height : 200px;
width: 200px;
margin: 10px;
background-repeat : no-repeat;
background-color: blue;
float: left;
}
#one
{
background-size:contain;
}
#two
{
background-size: 100%;
}
#three
{
background-size: 100% 100%;
}
</style>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>
<script>
$("#a").css("background-size","contain") //fits in aspect ratio
$("#b").css("background-size","100%") //constrained by width
$("#c").css("background-size","100% 100%") //stretch to fill
$("#d").css("background-size","auto 100%") //constrained by height
</script>
Hope this sheds some light on the problem.
There's some good references available on CSS, if you want to explore the properties and see what else can be done.
Related
I have a project I've been working on for the past couple of months. Everything has been working fine up till today. When I came I noticed that all my button sizes were the same. I like to use the developer tools in Chrome to help debug my websites, and when I looked to see why the buttons weren't displaying properly; nothing seemed amiss. So will you please help me identify what is going on and how I should fix it?
Here is the .aspx code:
<div class="row section text-center">
<h2><%: Page.Title %> Page</h2><br />
<asp:Button ID="stReturnButton" runat="server" CssClass="stButton-lg" Text="Back to Training Portal" PostBackUrl="~/SST/SafetyTrainingPortal.aspx" />
<hr />
</div>
<div class="row col-xs-12 text-center">
<div class="col-xs-6 text-center">
<asp:Button ID="btnEditUpdate" runat="server" Text="Update Employee Certificates" CssClass="stButton-lg" PostBackUrl="~/SST/SUPERVISOR/UpdateCertificates.aspx"/>
</div>
<div class="col-xs-6 text-center">
<asp:Button ID="btnAddCerts" runat="server" Text="Update Employee Profile" CssClass="stButton-lg" PostBackUrl="~/SST/SUPERVISOR/UpdateEmployeeProfile.aspx" />
</div>
Here is what the page looks like now:
This is the CSS for the buttons:
.stButton {
width: 190px;
opacity: 1.0;
color: #0e4676;
background-color: #9FCF6E;
border-color: #357ebd;
padding: 5px;
margin-bottom: 5px;
border-radius: 10px;
box-shadow: #063156 3px 3px;
cursor: pointer;
user-select: none;
text-align:center;
}
.stButton-lg {
width: 325px !important;
opacity: 1.0;
color: #0e4676;
background-color: #9FCF6E;
border-color: #357ebd;
padding: 5px;
margin-bottom: 5px;
border-radius: 10px;
box-shadow: #063156 3px 3px;
cursor: pointer;
user-select: none;
text-align: center;
}
As you can see I have CSS for a normal button and CSS for a larger button. The larger button being what I'm targeting in my .aspx code. I include the "!important" at the end of the width because the buttons aren't displaying correctly; just to see if that would help... obviously it didn't. I've also tried inline styling and that doesn't work either. One important note, I've viewed the page in the following browsers: IE, Chrome, and Edge.
Anyway, here are the links in the Master Page with a view of the files in the folder structure of the project:
I commented out the placeholder for the Script.Render since I'm declaring the links directly above the placeholder. Also, having it uncommented did nothing for me as well.
I think I've covered it all, so if I've missed something please let me know and I'll include it. I appreciate all and any help that is given.
Thank you for your help. I found the answer however and hopefully this helps someone else. The problem was that another less experienced team member had changed the width for the input controls to Max-Width: 150px in the CSS (not shown in the pictures above). That tiny thing through me for almost an entire day, but at least it was found and corrected.
Thank you to those who helped or commented.
A folder Images of my website contains HoezenCollageLight.jpg. It worked fine. But now it isn't shown anymore. I still find the image in the folder Images.
In the past:
... and now:
What could be wrong?
Some code in Site.Master:
<body>
<div class="page">
<div id="header">
<div id="menucontainer">
<ul id="menu">
<li><%: Html.ActionLink("Home", "Home", ...
Some code in Site.css:
body
{
background: #cccccc url('../../Images/HoezenCollageLight.jpg') repeat 100% 100%;
font-size: .75em;
font-family: Calibri, Helvetica, Sans-Serif;
margin: 0;
padding: 0;
color: #696969;
}
.page
{
width: 90%;
margin-left: auto;
margin-right: auto;
}
Removing one of the ../ from the url() path should have it find the image.
url('../Images/HoezenCollageLight.jpg')
Using ../ navigates from the directory containing the stylesheet (/Content/) to its parent (/), bringing you to the root of your site where the Images directory resides.
A 2nd ../ attempts to navigate up from the root directory, which doesn't have a parent (or navigates outside of the virtual directory, if you're using one).
Replace the code below for body:
background: url('../../Images/HoezenCollageLight.jpg') repeat 100% 100% #cccccc ;
instead of
background: #cccccc url('../../Images/HoezenCollageLight.jpg') repeat 100% 100%;
This works at certain times.
As Jonathan mentioned, check location of
your Site.css
your actual background image
in relation to the content file.
I have an asp placeholder object, within a div.
<div id="contentMenu" class="contentMenu">
<asp:PlaceHolder ID="plhMenu" runat="server">
</asp:PlaceHolder>
<div id="divMenuImage" class="menuImage">
<asp:Image ID="imgMenu" runat="server" ImageUrl="images/menu.gif" />
</div>
</div>
the div uses the following css:
.contentMenu
{
color: #ffffff;
left: 0px;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
position: absolute;
top: 85px;
width: 500px;
z-index: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
Items in the menu are added to the placeholder using calls such as:
plhMenu.Controls.Add(btnArrow);
plhMenu.Controls.Add(btnCategory);
Using the text-overflow property in the css is supposed to crop the text and show ellipses.
However, when the property "overflow : hidden" is in the css, all the menu disappears. Remove that propery and the menu appears, but the text-overflow doesn't work (it seems that overflow : hidden is required).
Any help in sorting this out would be very much appreciated as I have spent hours trying to figure out what is going on.
Thanks in advance.
You don't have a height on your container div, if you are adding items to the placeholder dynamically after the page is first drawn, then they might not cause the div to grow vertically.
You could try using overflow-x: hidden;?
Is there a way to get the innerHTML of a section of the page together with all style information that is used by the elements in that section(including styles that also come from corresponding stylesheets). So that when I insert the html somewhere else It will display with original styling.
It should display with styling anyway, unless I'm missing something in your question. If you have this style:
.item { color: red; background-color: #CCC; border: solid black 1px; }
.item a { color: #300; text-decoration: none; }
.item h2 { font-size: 1.5em; }
And this HTML:
<div id="test">
<div class="item">
<h2>Cat</h2>
Details
</div>
<div class="item">
<h2>Dog</h2>
Details
</div>
</div>
Moving that HTML to another section of the code (whether copy/pasting or moving it through DOM manipulation) shouldn't matter. The styles should be applied correctly. It's just a matter of constructing your CSS in a modular way. In this case, too much specificity could be an issue.
The images for my css header class load correctly in Chrome and FF, but not in IE8 or 7. Anyone know as to what I may be missing?
Here is the css class code:
.TBox {
color:#333333;
font-size:11px;
background: url("../../Images/box_bottom_right.gif") no-repeat bottom right;
margin: 0;
padding:0;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
.TBox .header {
margin: 0;
padding: 0;
background:url("../../Images/box_top_right.gif") no-repeat top right;
text-align: center;
}
.TBox .header h2 {
color:#ffffff;
background:url("../../Images/box_top_left.gif") no-repeat top left;
font-size:14px;
padding-top: 7px;
height:20px;
margin: 0;
}
.TBox .text {
background:url("../../Images/box_bottom_left.gif") no-repeat bottom left;
padding:10px 10px 15px 10px;
margin:0;
height:auto;
text-align:justify;
color:#003399;
line-height:15px;
}
And here is a portion of how I am using it, plus the stuff at the top of the file:
<div class="TBox" style="width: 90%; height: 100%; position:relative; right:-20px;">
<div class="header"> <h2>Terms:</h2> </div>
<asp:TextBox ID="txtTerms" runat="server" TextMode="MultiLine" Rows="5" MaxLength="500" Width="93%" CssClass="text" />
</div>
How did you create the images? If you used Photoshop, make sure you use the Save to Web... menu selection, NOT Save As...
If all else fails, use an absolute url. If that doesn't work, try the same browser on another computer.
I use it like this and it works in all browsers i tested
background: #fff url('../../images/bkgd_tile.gif') repeat-y 50% top;
Nothing wrong with the CSS itself, so you have a different problem. Maybe it's the images themselves? Can you view them directly in IE?
Maybe it's the relative paths not pointing in the right place. That's not specifically an IE difference, but if IE ended up at a slightly different URL due to routing, the ../.. stuff may end up pointing at the wrong level of folder. Rooted URLs are more reliable when you're using routing in ASP.NET (or elsewhere).