Change Row Background Image in CLASSIC MODE, No Visual Composer

[lux007]

I prefer to use shortcodes and raw HTML for my website. I am trying to change the background of the homepage rows but it never goes through?

COPY CODE

[vc_row inner_container="yes" text_align="center" section_type="main" type="image" bg_position="center" bg_position_horizontal="center" bg_repeat="no-repeat" bg_cover="true" bg_attachment="false" parallax_speed="0.04" padding_top="300" padding_bottom="60" min_height="0.04" border="none" css_animation="right-to-left" bg_image="4931" enable_parallax="false"][vc_column width="1/1"][vc_column_text css_animation="right-to-left"]
<h1><span style="color: #ffffff;">EXPLORE THE PLANET</span></h1>
[/vc_column_text][kleo_gap size="20px"][kleo_search_form form_style="transparent"][kleo_gap size="30px"][vc_row_inner][vc_column_inner width="1/4"][/vc_column_inner][vc_column_inner width="1/6"][vc_column_text css_animation="right-to-left"]
<h2 style="margin-bottom: 0; color: #fff !important;">[kleo_animate_numbers animation="animate-when-almost-visible" timer="1500"]2[/kleo_animate_numbers].[kleo_animate_numbers animation="animate-when-almost-visible" timer="1500"]247[/kleo_animate_numbers]</h2>
<p style="color: #fff;">PORTFOLIO ITEMS</p>
[/vc_column_text][/vc_column_inner][vc_column_inner width="1/6"][vc_column_text css_animation="right-to-left"]
<h2 style="margin-bottom: 0; color: #fff !important;">[kleo_animate_numbers animation="animate-when-almost-visible" timer="1500"]158[/kleo_animate_numbers]</h2>
<p style="color: #fff;">FEATURED ARTICLES</p>
[/vc_column_text][/vc_column_inner][vc_column_inner width="1/6"][vc_column_text css_animation="right-to-left"]
<h2 style="margin-bottom: 0; color: #fff !important;">[kleo_animate_numbers animation="animate-when-almost-visible" timer="1500"]28[/kleo_animate_numbers].[kleo_animate_numbers animation="animate-when-almost-visible" timer="1500"]731[/kleo_animate_numbers]</h2>
<p style="color: #fff;">DAILY SEARCHES</p>
[/vc_column_text][/vc_column_inner][vc_column_inner width="1/4"][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row]

To change the background, do I use “bg_url=blabla”? or “background_url=blalba” ? I’ve tried both and they don’t work. This is getting frustrating… Visual composer is fine for those that don’t know HTML but it makes things so much slower for those that know how to create div ids/classes, etc… I don’t want to have to upload an image every time I want to edit a row.

[sharmstr]

Is it faster to ask here or to just create a new page, add a row and a background image and then switch back to classic mode to get your answer? 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[sharmstr]

Also, I looked for a shortcode options list over at WP Bakery the other day because I use the VC shortcodes in php templates. I couldnt find one. Honestly, the easiest way I’ve found is to only add the section I’m trying to code in VC then switch back to classic mode. Quick and easy.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[sharmstr]

And to answer your question, you dont use either way you’ve tried. Its defined by the bg_image attribute. You give it the attachment (image) id. Not the image path/name.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[lux007]

So there’s no solution to this?

If I’m designing a site, would it be more efficient to:

1. upload/overwrite an image in http://www.site.com/images/ or
2. Go to pages, edit, switch to “backend editor”, edit row, wait for it to load, and upload the image (while knowing that I’d have to still delete all other previous uploads).

I’d rather do option #1.

[lux007]

COPY CODE

<section style="background-image: url(http://www.domain.com/images/image.jpg);background-position: center center;background-repeat: no-repeat;background-attachment: scroll;background-size: cover;padding-top: 300px;padding-bottom: 60px;min-height: 0.04px" data-prlx-speed="0.04" class="container-wrap main-color bg-parallax  text-center"><div class="section-container container"><div class="row">
	<div class="col-sm-12 wpb_column column_container">
		<div class="wpb_wrapper">
			
	<div class="kleo_text_column wpb_content_element ">
		<div class="wpb_wrapper">
			<h1><span style="color: #ffffff;">EXPLORE THE PLANET</span></h1>

		</div> 
	</div> <div style="height:20px;line-height:20px;" class="kleo-gap"></div><div class="kleo-search-wrap kleo-search-form search-style-transparent"><form data-context="" action="http://www.domain.com/" id="searchform" method="get" role="search">
		<div class="input-group">
			<input type="text" placeholder="" value="" class="ajax_s form-control input-lg" autocomplete="off" id="s" name="s" style="opacity: 0.5;"><span class="input-group-btn"><input type="submit" class="button" id="searchsubmit" value="Search"></span></div></form><span class="kleo-ajax-search-loading"><span class="kleo-loading-icon"></span></span><div class="kleo_ajax_results" style="opacity: 0.5;"></div></div><div style="height:30px;line-height:30px;" class="kleo-gap"></div>
<section style="" class="container-wrap main-color"><div class="section-container container"><div class="row">
	<div class="col-sm-3 wpb_column column_container">
		<div class="wpb_wrapper">
			
		</div> 
	</div> 

	<div class="col-sm-2 wpb_column column_container">
		<div class="wpb_wrapper">
			
	<div class="kleo_text_column wpb_content_element ">
		<div class="wpb_wrapper">
			<h2 style="margin-bottom: 0; color: #fff !important;"><span data-timer="1500" class="kleo-animate-number animate-when-almost-visible number_prepared start-animation" data-number="2">2</span>.<span data-timer="1500" class="kleo-animate-number animate-when-almost-visible number_prepared start-animation" data-number="247">247</span></h2>
<p style="color: #fff;">PORTFOLIO ITEMS</p>

		</div> 
	</div> 
		</div> 
	</div> 

	<div class="col-sm-2 wpb_column column_container">
		<div class="wpb_wrapper">
			
	<div class="kleo_text_column wpb_content_element ">
		<div class="wpb_wrapper">
			<h2 style="margin-bottom: 0; color: #fff !important;"><span data-timer="1500" class="kleo-animate-number animate-when-almost-visible number_prepared start-animation" data-number="158">158</span></h2>
<p style="color: #fff;">FEATURED ARTICLES</p>

		</div> 
	</div> 
		</div> 
	</div> 

	<div class="col-sm-2 wpb_column column_container">
		<div class="wpb_wrapper">
			
	<div class="kleo_text_column wpb_content_element ">
		<div class="wpb_wrapper">
			<h2 style="margin-bottom: 0; color: #fff !important;"><span data-timer="1500" class="kleo-animate-number animate-when-almost-visible number_prepared start-animation" data-number="28">28</span>.<span data-timer="1500" class="kleo-animate-number animate-when-almost-visible number_prepared start-animation" data-number="731">731</span></h2>
<p style="color: #fff;">DAILY SEARCHES</p>

		</div> 
	</div> 
		</div> 
	</div> 

	<div class="col-sm-3 wpb_column column_container">
		<div class="wpb_wrapper">
			
		</div> 
	</div> 
</div></div></section><!-- end section -->
		</div> 
	</div> 
</div></div></section>

I guess that’s the only way to do it… straight html.

[sharmstr]

You have to upload the image anyway. All you have to do is edit the image id number which you can see in media manager after you upload it. Not sure why that’s so hard.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[sharmstr]

(hit submit too soon) I wasn’t implying that you use VC everytime you wanted to change the image. I was only saying you need to do it once to figure out the actual shortcode options.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[Author]

Posts