background-image

Resizing background-image always proportionally to scale with a center point

由 僤鯓⒐⒋嵵緔 提交于 2019-11-27 01:37:30
问题 I want to be able to reproduce the behavior of this website's image when resizing. It seems like the background-image has a center point where the image start to crop when it cannot keep its proportion scale. Here is an example: http://themes.evgenyfireform.com/wp-jad/ For now my background has the following css: #bg { position: fixed; top: 0; left: 0px; width:100%; } The problem is that it's fixed and I want it to crop when the image can't be scale. 回答1: You are looking for this combination:

Background images not working in Outlook 2007 and later

由 拟墨画扇 提交于 2019-11-27 01:02:35
问题 I made an HTML Email Template that is working fine in most email readers, but the background images are not showing in Outlook 2007, 2010, and 2013. How can I solve the problem? Here's the HTML for the email: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> * { padding: 0px;

Overlay a background-image with an rgba background-color

由 不羁岁月 提交于 2019-11-27 00:55:38
I have a div with a background-image . I want to overlay the background-image with an rgba color ( rgba(0,0,0,0.1) ) when the user hovers the div. I was wondering if there's a one-div solution (i.e. not with multiple divs, one for the image and one for the color, etc.). I tried multiple things: <div class="the-div" id="test-1"></div> <div class="the-div" id="test-2"></div> <div class="the-div" id="test-3"></div> And this CSS: .the-div { background-image: url('the-image'); margin: 10px; width: 200px; height: 80px; } #test-1:hover { background-color: rgba(0,0,0,0.1); } #test-2:hover { background

Fit background image to div

由 牧云@^-^@ 提交于 2019-11-26 23:20:46
I have a background image in the following div, but the image gets cut off: <div style='text-align:center;background-image: url(/media/img_1_bg.jpg);background-repeat:no-repeat;width:450px;height:900px;' id="mainpage" align="center"> Is there a way to show the background image without cutting it off? grc You can achieve this with the background-size property, which is now supported by most browsers . To scale the background image to fit inside the div: background-size: contain; To scale the background image to cover the whole div: background-size: cover; JSFiddle example There also exists a

Changing background image using jquery

由 北城以北 提交于 2019-11-26 23:19:03
问题 I have this jquery code that changes the image of the background on click: $('a.note').click(function(){ $('#full').css('background-image','img/1.jpg'); }); However, it's not changing. Is there something I'm missing? 回答1: You need to include the url() part of the background-image property. $('#full').css('background-image','url(img/1.jpg)'); 来源： https://stackoverflow.com/questions/4578714/changing-background-image-using-jquery

CSS blur on background image but not on content

由 好久不见. 提交于 2019-11-26 22:49:50
I did this example . I'm trying to blur the background image, but the main content is blurred too (the <span> ) How can I blur the background without blurring the content? Kevin Lynch You could overlay one element above the blurred element like so DEMO div { position: absolute; left:0; top: 0; } p { position: absolute; left:0; top: 0; } Mike Lee jsfiddle .blur-bgimage { overflow: hidden; margin: 0; text-align: left; } .blur-bgimage:before { content: ""; position: absolute; width : 100%; height: 100%; background: inherit; z-index: -1; filter : blur(10px); -moz-filter : blur(10px); -webkit

JPanel with image background

由 时光毁灭记忆、已成空白 提交于 2019-11-26 22:25:31
问题 How to put image background on JPANEL? JPanel pDraw = new JPanel(new GridLayout(ROWS,COLS,2,2)); pDraw.setPreferredSize(new Dimension(600,600)); //size of the JPanel pDraw.setBackground(Color.RED); //How can I change the background from red color to image? 回答1: Here's an explanation. 回答2: It is probably easiest to load the Image into an ImageIcon and display it in a JLabel , however: To directly 'draw' the image to the JPanel, override the JPanel's paintComponent(Graphics) method to something

fade in background jquery

由 十年热恋 提交于 2019-11-26 22:09:26
问题 I'm trying to fade some images on the background of my site but isn't working T_T . Thanks in advance ! HTML : <body> <div id="menu1"></div> <div id="menu2"></div> <div id="menu3"></div> </body> CSS : body { background-color: #1f304e; background-image: url('images/bg.jpg'); background-repeat: no-repeat; background-attachment:fixed; background-position: center 0px; } JQuery : $('#menu1').click(function(){ $(body).animate({background : url('images/bg1.jpg') }, 600); }); $('#menu2').click

Print background image in IE without enable “Print background colors and images”

由 妖精的绣舞 提交于 2019-11-26 21:37:13
问题 Is possible to print a background-image whithout enabling "Print Background colors and images" in Advanced tab of Internet Options ? I think to use a alternative way without "background-image"... Using div tag and position absolute is possible to emulate the same effect of background-image? Also I would like to repeat the background image through the page. 回答1: The ability to print background images (those images specified as background-images in the markup) is entirely up to the end user,

CSS, background-repeat distance

由 左心房为你撑大大i 提交于 2019-11-26 21:13:00
问题 I want to set a background-image but with an specific distance between the repetitions. For example, I have this image to become a background-image : And I want to fix the repetitions in a pattern like this: Check the JSFiddle playground I'm looking for a CSS3 clean solution, not JS, not extra elements, and so forth. If I have to use very modern CSS3 (un-supported) tricks is ok. 回答1: I guess the ship has pretty much sailed, but still there is a solution based on data-URI. You can generate an
订阅 background-image