I have a JPEG picture, exported from a PhotoShop PSD, not to big but ~2MB
When I want this picture as a background image with this CSS:
body{
background-color: green;
background-image: url("url");
background-size: 100%;
background-repeat: no-repeat;
background-position: top center;
}
and then embed it in my website with
<object width="100%" height="100%" data="data:application/pdf;base64,'myBase64string'" type="application/pdf">'
<embed src="data:application/pdf;base64,'myBase64string'" type="application/pdf" />
</object>
the resulting object is empty, no errors in the console.
Although when I fill it in in https://base64.guru/converter/decode/pdf I get a valid PDF containing what I expect.
Unfortunately the customer won't let me share the actual picture, but when I downgrade the quality to 80% using PhotoShop, the size drops to ~1MB and it does work.
Anybody got any insights?
Related
Is there a way where I could change the normal plain buttons on the header like this one? (Image bellow) I have the debut theme and working on Shopify
image
Add this code into your store css file and change class name where you want to apply image on button. Also you have to add button image into your store setting=> files
After that you have to copy image path and put into background-image ="change here image " in css code
<input type="submit" class="button">
button {
background-image: url(https://cdn.shopify.com/s/files/1/1023/3903/files/Capture12345.png?v=1652449658);
background-repeat: no-repeat;
background-size: cover;
}
you can just simply add background:url('image-url') on button
{
background: url('image-url');
background-position: center;
background-color: transparent;
}
I use MVC4 and minifying my CSS files, but a div tag that have a background image isn't showing the image in release mode. When I inspect the page with firebug, it says "Failed to load image..."
It works in debug mode, but not in release mode.
What is wrong with my div background images?
The physical path on my project is "\Content\themes\default\images\" and the CSS looks like this:
.headerlogo {
background-image: url('images/logo.png');
background-repeat: no-repeat;
background-size: auto auto;
height: 28px;
width: 127px;
margin-top: 25px;
}
I tested the following:
background-image: url("themes/default/minified/images/logo.png");
It works, but if you create a sample MVC4 internet application and look at it's CSS, the image address is:
url(images/ui-bg_flat_0_aaaaaa_40x100.png)
Why doesn't this work for me?
I'm trying to get a nice fullscreen image background for my website. It's working fine in almost every browser I tested in (browsershots.org), but in Chrome on my Android tablet it's not working as expected. As you can see there's a lot of white in the background, where it should be all image.
Link : http://test.socie.nl
CSS :
body {
background: url(../../images/background/image1.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Unexpected result :
It appears to be a four year old bug that the Android/Chrome team are ignoring:
https://code.google.com/p/android/issues/detail?id=3301
http://productforums.google.com/forum/#!topic/chrome/l6BF3W0rymo
I've tried every solution I could find mentioned in those links and other places; all fail on Android 4.3 Chrome 30. All fail even worse on Android 2.3 native browser.
The one I am going with is:
.body{
background:#fff url(background.jpg) no-repeat fixed center;
background-size:cover;
}
(I.e. that CSS moved out of body into a class called "body"), and then in the HTML I have:
<body>
<div class="body">
...
<div class="ftpush"></div><!--Part of keeping the footer at the bottom of window-->
</div><!--end of "body"-->
<div class="footer"></div>
</body>
</html>
(BTW, the technique you can see there, to keep the footer at the bottom of the window, does not appear to be causing the problem, as in my first set of experiments I'd stripped that out.)
Aside: I was surprised to see Firefox for Android also misbehaves with background-size:cover. Are they sharing the same rendering engine?!
There is update to the method posted above (as published here).
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Though the issue in the original question still persists despite the update. What worked for me was adding full width and height to the html CSS in addition to the above:
html {
width: 100%;
height: 100%
}
Solved by adding the following:
html {
height:100%;
min-height:100%;
}
body {
min-height:100%;
}
Instead of a background image, try using an <img> instead:
HTML :
<img src="imagepath" id="your-id" />
CSS :
#your-id{
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
z-index: -999;
}
Actually ALL I needed if your using html tag is to add:
height: 100%;
...with the caveat that still the image will resize a bit when you scroll the menu bar out of view, but I think all of other answers also have that issue.
Here is the css code I am using:
#wrapper{
position:relative;
width:950px;
margin-left:auto;
margin-right:auto
}
#content {
text-align: left;
padding: 0px 25px 0px 25px;
margin-left: auto;
margin-right: auto;
position: absolute;
left: 50%;
/*half of width of element*/
margin-left: -450px;
height: auto;
}
And this is the site: http://projectstratos.com/31-01-11/
Please ignore the social icons and the height issues.
To see what I mean make your browser smaller and bigger. The text moves to the right while the background image stays centered. How can I fix this?
I don't believe there's an actual 'fix' for the problem you're presenting.
When you say that the text 'moves to the right' in reality- the text is not moving at all.
Your background image is just trying to maintain itself in the center of the horizontal axis- which you're changing.
For example.. If you got Bungie's website http://www.bungie.net/Projects/Reach/default.aspx and you perform the same action. You'll get the same 'effect' that you are. The only difference is that the background of the text in their website isn't a part of the background image.
Here's what you need to do in order to 'fix' you're problem.
Separate the background (planet, space, etc..) from the logo, purple box etc.
Keep the space, planet, etc.. in the same spot as the background image that's there now.
Take the purple box and put it in it's own div that wraps around all your content
You're code will look similar to this:
<body>
<div id="purpleboxbackgroundimage">
<div id="contentandtext">
<h1>jhkljhlkjhlkj</h1>
</div>
</div>
</body>
I hope this helps.
I have some text rotated 270 degrees, which I would like to apply the -moz-box-shadow/box-shadow/-webkit-box-shadow CSS propert to. Unfortunately, the browsers all render the box shadow as if the text block element has not been rotated (i.e the shadow position is 90 degrees away from where it should be as if in standard left-to-right rendering)
Is there a way to overcome this problem?
This works for me. Can you post your code so we can see what you're doing? (For example one thing you could be doing is setting your transform - rotate on a span element but setting your box-shadow on a container div.)
Here is some webkit code that works:
#RRottatte{ -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(270deg);
width: 100px;
height: 100px;
top: 300px;
left: 200px;
-webkit-box-shadow: 6px 6px 0px red;
}
</style>
</head>
<body>
<div id="RRottatte">My Rotated Text</div></body>
</html>
You are probably applying the box shadow to a parent container (which is not rotated), you must apply it to the container which has the transform, i.e:
http://jsfiddle.net/QK9wG/