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;
}
Related
I'm trying to add a background image in my ion-content
here is my current code:
ion-content{
--background: none;
background-image: url('/assets/images/home-background.png');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
text-align: center;
}
I also tried the following but same thing happened.
ion-content{
--background: url('/assets/images/home-background.png') no-repeat center center / cover;
text-align: center;
}
It is working in browser but when I'm doing ionic cordova run android, the background image is not showing. I also tried to change the url to url('../assets/images/home-background.png'), url('./assets/images/home-background.png') and url('../images/home-background.png') but it's giving me error.
I tried to check it and debug it and maybe this can help, I clicked the url and it brings me to the resources which shows me the image
In this second image, I saw the home-background.png
didn't have the chance to solve this problem using the ionic-content, so what I did is to change the ionic-content to div, and it solve my problem. Working in web and android device.
Open scss file:
ion-content {
background: url('../../assets/img/myBg.jpg') center bottom no-repeat;
background-size: 100%;
}
Try changing the path keep images in main www/assets/img folder and then set
background-image: url('assets/img/home-background.png');
background-image: url('..assets/img/home-background.png');
if u have set path just type ../ or ./ automatically path will suggestion
You can try to change your image url as shown below
ion-content{
--background: none;
background-image: url('../../assets/images/home-background.png');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
text-align: center;
}
this worked for me.
I'm using a CMS theme that contains all of Bootstrap 3. Is it possible to add a title block manually in HTML/CSS? I'm not sure if that's the block's official name... it's the purple full-width block containing the text:
CSS
Global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system.
in the following link (for example):
http://getbootstrap.com/css/
This title block is built into my theme and is available based on the design for the page I select.
But I was wondering if this block is available separately from Bootstrap, like a Navbar, panel, well, etc. component, that I can just include some HTML/CSS code and have it appear in the body of a page, for example.
No it's not in bootstrap but it's pretty easy to grab the style and use it anywhere:
.bs-docs-header {
font-size: 24px;
padding-bottom: 60px;
padding-top: 60px;
text-align: left;
}
.bs-docs-masthead, .bs-docs-header {
background-color: #6F5499;
background-image: linear-gradient(to bottom, #563D7C 0px, #6F5499 100%);
background-repeat: repeat-x;
color: #CDBFE3;
padding: 30px 15px;
position: relative;
text-align: center;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}
check this jsfiddle
If you look at their source, they are using a stylesheet called docs.min.css, they have defined the background in here. Other then that it is just a simple <div class="container"><!--title and subtitle here-->. So the answer is a yes and a no. You can, of course, use containers seperately from your CMS when using bootstrap, but the background will not be available unless you strip it from the getbootstrap.com source.
Edit
If you see their styles, they are using this code in their docs.min.css:
#media (min-width: 768px)
.bs-docs-header h1 {
font-size: 60px;
line-height: 1;
}
}
This means, when the width of your window is above 768 pixels, it gives the h1 a font-size of 60px. When you fall under it, this code is ignored and the default bootstrap font-size is being applied.
Edit 2
To get a background-color behind it, don't apply the background color to the .container. wrap a div around it without a width value. The container width is not full width, so if you apply a background to it, its only behind the container that is centered.
Edit 3
A simple HTML structure would be something like this (you still have to include all bootstrap styles and default html tags etc.
<html>
<body>
<div id="bgColorDiv">
<div class="container">
<h1>My title</h1>
<p>Paragraph below the title</p>
</div>
</div>
</body>
</html>
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.
This button is before CSS Sprites
<input type="image" src="/images/search-button.png" value="" id="search-button">
I'm trying to implement CSS Sprites with one of my search form and the problem is that if I use
<input id="search-button" class="sprites1" type="submit" value="">
it will look something like this.
As you can see the image on the right doesn't look right, but it is click-able.
Then I tried with
<span id="search-button" class="sprites1"></span>
Then it looks right! But!! I can't click on it.
So here is my CSS sprites code.
What I have to implement to get it look the one I want and I can click on it?
.sprites1 {
background: url('result.png');
}
#search-button {background-position: -0px -462px;
width:16px; height:16px; float:right; }
The problem here is the default css that the browser uses on elements. You should try resetting that css. I often use the following snippet:
/* reset css of buttons */
.cssresetbutton {
border-width: 0px;
border-style: none;
background: inherit;
font: inherit;
color: blue;
padding: 0px; }
.cssresetbutton:active {
border-width: 0px;
border-style: none;
background: inherit;
outline: 0;
box-shadow: none; }
try adding the cssresetbutton class to your input element and see if it works.
EDIT:
You can also try not using a input[type=submit] element. For example:
<span id="search-button" class="sprites1" onClick="document.getElementById('formid').submit()"></span>
It will submit the form#formid element when clicked.